

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=dark>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/deng-2022/blog_2/img/fluid.png">
  <link rel="icon" href="/deng-2022/blog_2/img/icon/dw.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Memory">
  <meta name="keywords" content="">
  
    <meta name="description" content="🍱 Memory API接口开放平台的开发基本流程">
<meta property="og:type" content="article">
<meta property="og:title" content="MemoryAPI 忆汇廊-开发文档">
<meta property="og:url" content="https://atomgit.com/deng-2022/blog_2/2023/07/11/MemoryAPI%20%E5%BF%86%E6%B1%87%E5%BB%8A-%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3/index.html">
<meta property="og:site_name" content="Memory&#39;s blog">
<meta property="og:description" content="🍱 Memory API接口开放平台的开发基本流程">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://atomgit.com/deng-2022/blog_2/img/artical/spring.jpg">
<meta property="article:published_time" content="2023-07-11T15:09:22.000Z">
<meta property="article:modified_time" content="2024-02-27T01:07:25.000Z">
<meta property="article:author" content="Memory">
<meta property="article:tag" content="项目">
<meta property="article:tag" content="开发经验">
<meta property="article:tag" content="Redis">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://atomgit.com/deng-2022/blog_2/img/artical/spring.jpg">
  
  
  
  <title>MemoryAPI 忆汇廊-开发文档 - Memory&#39;s blog</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/deng-2022/blog_2/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/deng-2022/blog_2/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/deng-2022/blog_2/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"atomgit.com","root":"/deng-2022/blog_2/","version":"1.9.4","typing":{"enable":true,"typeSpeed":100,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":false,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":true,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/deng-2022/blog_2/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/deng-2022/blog_2/js/utils.js" ></script>
  <script  src="/deng-2022/blog_2/js/color-schema.js" ></script>
  

  

  

  

  

  

  

  



  
<meta name="generator" content="Hexo 5.4.2"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 75vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/deng-2022/blog_2/">
      <strong>Memory&#39;s blog</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/deng-2022/blog_2/">
                <i class="iconfont icon-home-fill"></i>
                <span>首页</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/deng-2022/blog_2/archives/">
                <i class="iconfont icon-archive-fill"></i>
                <span>归档</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/deng-2022/blog_2/categories/">
                <i class="iconfont icon-category-fill"></i>
                <span>分类</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/deng-2022/blog_2/tags/">
                <i class="iconfont icon-tags-fill"></i>
                <span>标签</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/deng-2022/blog_2/about/">
                <i class="iconfont icon-user-fill"></i>
                <span>关于</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/deng-2022/blog_2/links/">
                <i class="iconfont icon-link-fill"></i>
                <span>友链</span>
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              <i class="iconfont icon-search"></i>
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">
              <i class="iconfont icon-dark" id="color-toggle-icon"></i>
            </a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/deng-2022/blog_2/img/newBG/girl.jpg') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="MemoryAPI 忆汇廊-开发文档"></span>
          
        </div>

        
          
  <div class="mt-3">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-author" aria-hidden="true"></i>
        Memory
      </span>
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2023-07-11 23:09" pubdate>
          2023年7月11日 晚上
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          78k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          195 分钟
        
      </span>
    

    
    
      
        <span id="leancloud-page-views-container" class="post-meta" style="display: none">
          <i class="iconfont icon-eye" aria-hidden="true"></i>
          <span id="leancloud-page-views"></span> 次
        </span>
        
      
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar category-bar" style="margin-right: -1rem">
    





<div class="category-list">
  
  
    
    
    
    <div class="category row nomargin-x">
      <a class="category-item 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="Redis"
        id="heading-e111446745a1825b862f8727ae63bce4" role="tab" data-toggle="collapse" href="#collapse-e111446745a1825b862f8727ae63bce4"
        aria-expanded="true"
      >
        Redis
        <span class="list-group-count">(3)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-e111446745a1825b862f8727ae63bce4"
           role="tabpanel" aria-labelledby="heading-e111446745a1825b862f8727ae63bce4">
        
        
          
          
  <div class="category-post-list">
    
    
  </div>

          
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem collapsed
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="经验"
        id="heading-32a8e000e928e6dc255876d9fc0178b3" role="tab" data-toggle="collapse" href="#collapse-32a8e000e928e6dc255876d9fc0178b3"
        aria-expanded="false"
      >
        经验
        <span class="list-group-count">(1)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse " id="collapse-32a8e000e928e6dc255876d9fc0178b3"
           role="tabpanel" aria-labelledby="heading-32a8e000e928e6dc255876d9fc0178b3">
        
        
          
  <div class="category-post-list">
    
    
      
      
        <a href="/deng-2022/blog_2/2023/10/24/Redis%20%E9%A3%8E%E6%9A%B4%EF%BC%9A%E4%BB%8E%E5%8E%9F%E7%90%86%E5%88%B0%E5%BA%94%E7%94%A8%EF%BC%8C%E4%B8%80%E6%8E%A2%E5%86%85%E5%AD%98%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E5%A5%A5%E7%A7%98/" title="Redis 风暴：从原理到应用，一探内存中的数据奥秘"
           class="list-group-item list-group-item-action
           ">
          <span class="category-post">Redis 风暴：从原理到应用，一探内存中的数据奥秘</span>
        </a>
      
    
  </div>

        
      </div>
    </div>
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="项目"
        id="heading-31ecc0e65b4cd3e6b12577382bb56d6a" role="tab" data-toggle="collapse" href="#collapse-31ecc0e65b4cd3e6b12577382bb56d6a"
        aria-expanded="true"
      >
        项目
        <span class="list-group-count">(2)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-31ecc0e65b4cd3e6b12577382bb56d6a"
           role="tabpanel" aria-labelledby="heading-31ecc0e65b4cd3e6b12577382bb56d6a">
        
        
          
          
  <div class="category-post-list">
    
    
  </div>

          
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="开发经验"
        id="heading-bfd19ce0478d81a44ceb5a9a1aa94202" role="tab" data-toggle="collapse" href="#collapse-bfd19ce0478d81a44ceb5a9a1aa94202"
        aria-expanded="true"
      >
        开发经验
        <span class="list-group-count">(2)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-bfd19ce0478d81a44ceb5a9a1aa94202"
           role="tabpanel" aria-labelledby="heading-bfd19ce0478d81a44ceb5a9a1aa94202">
        
        
          
  <div class="category-post-list">
    
    
      
      
        <a href="/deng-2022/blog_2/2023/03/24/Memory%20%E4%BC%99%E4%BC%B4%E5%8C%B9%E9%85%8D%E7%B3%BB%E7%BB%9F-%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3/" title="Memory 伙伴匹配系统-开发文档"
           class="list-group-item list-group-item-action
           ">
          <span class="category-post">Memory 伙伴匹配系统-开发文档</span>
        </a>
      
    
      
      
        <a href="/deng-2022/blog_2/2023/07/11/MemoryAPI%20%E5%BF%86%E6%B1%87%E5%BB%8A-%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3/" title="MemoryAPI 忆汇廊-开发文档"
           class="list-group-item list-group-item-action
           active">
          <span class="category-post">MemoryAPI 忆汇廊-开发文档</span>
        </a>
      
    
  </div>

        
      </div>
    </div>
  
        
      </div>
    </div>
  
        
      </div>
    </div>
  
</div>


  </aside>


    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">MemoryAPI 忆汇廊-开发文档</h1>
            
              <p class="note note-success">
                
                  
                    本文最后更新于：3 个月前
                  
                
              </p>
            
            
              <div class="markdown-body">
                
                <h1 id="MemoryAPI-忆汇廊"><a href="#MemoryAPI-忆汇廊" class="headerlink" title="MemoryAPI 忆汇廊"></a>MemoryAPI 忆汇廊</h1><p>前端代码仓库：<a target="_blank" rel="noopener" href="https://gitee.com/deng-2022/memory-api-frontend">memory-api-frontend</a></p>
<h2 id="☕-项目概述"><a href="#☕-项目概述" class="headerlink" title="☕ 项目概述"></a>☕ 项目概述</h2><p>这个项目是一个基于 Spring Cloud + React 的全栈微服务架构 <code>API 接口开放平台</code>，致力于提供丰富的 API  <strong>接口管理与调试</strong> 工具、灵活的 <strong>计费与限制管理</strong> 功能，为开发者提供<code>高效</code>、<code>安全</code>、<code>易用</code>的服务，助力企业创新和数字化转型。</p>
<h2 id="🥘-效果展示"><a href="#🥘-效果展示" class="headerlink" title="🥘 效果展示"></a>🥘 效果展示</h2><h3 id="用户登录"><a href="#用户登录" class="headerlink" title="用户登录"></a>用户登录</h3><p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240226093246181.png" alt="image-20240226093246181"></p>
<h3 id="丰富的接口服务"><a href="#丰富的接口服务" class="headerlink" title="丰富的接口服务"></a>丰富的接口服务</h3><p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224170147055.png" alt="image-20240224170147055"></p>
<h3 id="接口调用"><a href="#接口调用" class="headerlink" title="接口调用"></a>接口调用</h3><p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224163717124.png" alt="image-20240224163717124"></p>
<h3 id="SDK-集成"><a href="#SDK-集成" class="headerlink" title="SDK 集成"></a>SDK 集成</h3><p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240226200537043.png" alt="image-20240226200537043"></p>
<h3 id="流量监控"><a href="#流量监控" class="headerlink" title="流量监控"></a>流量监控</h3><p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224170440069.png" alt="image-20240224170440069"></p>
<h3 id="注册用户管理"><a href="#注册用户管理" class="headerlink" title="注册用户管理"></a>注册用户管理</h3><p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224160321907.png" alt="image-20240224160321907"></p>
<h3 id="接口发布-下线"><a href="#接口发布-下线" class="headerlink" title="接口发布/下线"></a>接口发布/下线</h3><p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224160344953.png" alt="image-20240224160344953"></p>
<h3 id="个人信息管理"><a href="#个人信息管理" class="headerlink" title="个人信息管理"></a>个人信息管理</h3><p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224163806434.png" alt="image-20240224163806434"></p>
<h2 id="🍚-使用场景"><a href="#🍚-使用场景" class="headerlink" title="🍚 使用场景"></a>🍚 使用场景</h2><ul>
<li><p>开放平台的接口提供：适用于需要提供 API 接口给其他开发者或应用程序使用的项目。</p>
</li>
<li><p>接口管理和调试：管理员和开发者可以使用该平台进行接口管理、调试和监控。</p>
</li>
<li><p>应用程序开发：开发者可以在代码中使用提供的 SDK 快速调用接口，加速应用程序开发。</p>
</li>
<li><p>计费与限制管理：适用于需要对接口调用进行计费和限制的项目，提供了灵活的计费和充值系统。</p>
</li>
</ul>
<h2 id="🥩-核心功能与特点"><a href="#🥩-核心功能与特点" class="headerlink" title="🥩 核心功能与特点"></a>🥩 核心功能与特点</h2><ul>
<li><p><strong>多元 API 生态</strong>：平台提供多样化的 API 接口，涵盖各种应用场景和需求，满足不同开发者的需求。接口文档详尽，易于理解和使用，方便开发者快速集成和使用。</p>
</li>
<li><p><strong>高效 SDK 集成</strong>：平台提供多种编程语言和框架的客户端 SDK，简化开发者调用接口的过程。SDK 稳定、兼容性好，提供简洁易用的 API，提高开发效率。</p>
</li>
<li><p><strong>实时流量监控</strong>：平台提供热门接口调用排行榜，展示最受欢迎和最常用的接口。提供详细的流量统计分析，帮助开发者了解接口的使用情况和性能表现。</p>
</li>
<li><p><strong>资源集中管理</strong>：管理员可以全面管理平台的资源，包括注册用户信息、接口的增删管理、发布上线等。提供灵活的权限设置和角色划分，确保不同管理员之间的权限互不干扰且职责明确。</p>
</li>
<li><p><strong>个人信息管理</strong>：用户可以注册并登录平台，管理自己的个人信息，包括账户设置、密码修改等。平台保障用户信息的安全性和隐私性，遵守相关法律法规。</p>
</li>
</ul>
<h2 id="🍜-访问地址"><a href="#🍜-访问地址" class="headerlink" title="🍜 访问地址"></a>🍜 访问地址</h2><p>暂未部署上线，点击跳转至：<a target="_blank" rel="noopener" href="https://deng-2022.gitee.io/blog/2023/08/26/Memory%20%E8%81%9A%E5%90%88%E6%90%9C%E7%B4%A2%E5%B9%B3%E5%8F%B0-%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3/">个人博客 MemorySearch 开发文档</a></p>
<h2 id="🍝-架构设计"><a href="#🍝-架构设计" class="headerlink" title="🍝 架构设计"></a>🍝 架构设计</h2><p>原图链接：<a target="_blank" rel="noopener" href="https://www.yuque.com/huiyiruchu-7jxo6/azga9e/zonr9byctomyqz4t?singleDoc#">项目架构图</a></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224105144169.png" alt="image-20240224105144169"></p>
<h2 id="🍺-技术选型"><a href="#🍺-技术选型" class="headerlink" title="🍺 技术选型"></a>🍺 技术选型</h2><h3 id="后端"><a href="#后端" class="headerlink" title="后端"></a>后端</h3><ul>
<li>Java 核心知识：精通 Java 语言的核心特性，包括集合类、异常处理机制，以及泛型、注解等高级特性。</li>
<li>Lambda 表达式：能够熟练运用 Lambda 表达式简化代码，提升代码的可读性和可维护性。</li>
<li>工具库：熟练运用 Hutool、Apache Commons 等工具库，为日常开发提供便捷和高效的支持。</li>
<li>SSM + Spring Boot：熟悉 Spring、SpringMVC、MyBatis 组成的 SSM 框架，以及基于 Spring Boot 的快速开发模式。</li>
<li>MyBatis Plus + MyBatis X：能够利用 MyBatis Plus 的增强功能，结合 MyBatis X 自动化工具，实现高效的 CRUD 代码生成。</li>
<li>MySQL 数据库：精通 MySQL 数据库设计，掌握索引优化、性能调优等关键技能，通过 Explain 分析等手段不断提升数据库性能。</li>
<li> <strong>API 签名认证</strong> ：熟悉 API 签名认证机制，确保数据传输的安全性。</li>
<li>用户权限管理：具备实现用户角色、权限管理的经验，能够设计并实现复杂的权限控制逻辑。</li>
<li>Spring Boot Starter SDK：熟悉 Spring Boot Starter 的扩展机制，能够快速集成第三方 SDK，满足业务需求。</li>
<li>Nacos：掌握 Nacos 作为服务注册与发现、配置管理中心的用法，为分布式系统提供稳定的支持。</li>
<li> <strong>Dubbo RPC</strong> ：熟悉 Dubbo RPC 框架，了解服务治理和远程调用机制，为微服务架构提供强大的通信能力。</li>
<li>Spring Cloud Gateway：能够使用 Spring Cloud Gateway 实现 API 网关，提供统一的请求入口、访问控制等功能。</li>
<li>Git：熟练使用 Git 进行版本控制，保证代码的安全和可追溯性。</li>
<li>IDEA：精通 IntelliJ IDEA 开发工具，利用其强大的功能提升开发效率。</li>
<li>ChatGPT：能够利用 ChatGPT 进行需求理解、代码片段生成等辅助开发工作。</li>
<li>Swagger：熟悉 Swagger 文档生成工具，为 API 提供清晰、规范的文档支持。</li>
<li>Navicat：掌握 Navicat 数据库管理工具，方便日常数据库操作和维护。</li>
</ul>
<h3 id="前端"><a href="#前端" class="headerlink" title="前端"></a>前端</h3><ul>
<li>React 核心开发：掌握 React.js 框架，能够根据业务需求定制前端模板，实现高效的前端页面渲染。</li>
<li>Ant Design Pro：熟悉 Ant Design Pro 框架，能够快速搭建企业级的前端应用。</li>
<li>Ant Design：熟悉 Ant Design 组件库，能够快速构建美观、功能丰富的前端界面。</li>
<li>Echarts：掌握 Echarts 数据可视化库，为前端界面提供丰富的图表展示功能。</li>
<li>Axios：用于发送 HTTP 请求，与后端 API 进行交互。</li>
<li>ECharts：用于数据可视化，展示统计图表。</li>
<li>VS Code：精通 Visual Studio Code 开发工具，利用其丰富的插件和强大的功能提升开发体验。</li>
<li>WebStorm IDE：熟悉 WebStorm IDE，为前端开发提供稳定的支持。</li>
</ul>
<h2 id="🍰-快速启动"><a href="#🍰-快速启动" class="headerlink" title="🍰 快速启动"></a>🍰 快速启动</h2><p>拉取代码后，应该如何运行该项目？</p>
<h3 id="后端-1"><a href="#后端-1" class="headerlink" title="后端"></a>后端</h3><h4 id="修改配置文件"><a href="#修改配置文件" class="headerlink" title="修改配置文件"></a>修改配置文件</h4><ul>
<li>配置 Nacos、MySQL、Redis 为本机地址：</li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-comment"># 数据库配置</span><br><span class="hljs-attr">datasource:</span><br>  <span class="hljs-attr">driver-class-name:</span> <span class="hljs-string">com.mysql.cj.jdbc.Driver</span><br>  <span class="hljs-attr">url:</span> <span class="hljs-string">jdbc:mysql://localhost:3306/xxx</span><br>  <span class="hljs-attr">username:</span> <span class="hljs-string">xxx</span><br>  <span class="hljs-attr">password:</span> <span class="hljs-string">xxx</span><br></code></pre></td></tr></table></figure>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-comment"># Redis 配置</span><br><span class="hljs-attr">redis:</span><br>  <span class="hljs-attr">database:</span> <span class="hljs-number">0</span><br>  <span class="hljs-attr">host:</span> <span class="hljs-string">localhost</span><br>  <span class="hljs-attr">port:</span> <span class="hljs-number">6379</span><br>  <span class="hljs-attr">timeout:</span> <span class="hljs-number">5000</span><br>  <span class="hljs-attr">password:</span> <span class="hljs-string">Dw990831</span><br></code></pre></td></tr></table></figure>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-comment"># Nacos 配置</span><br><span class="hljs-attr">dubbo:</span><br>  <span class="hljs-attr">application:</span><br>    <span class="hljs-attr">name:</span> <span class="hljs-string">dubbo-springboot-demo-provider</span><br>  <span class="hljs-attr">protocol:</span><br>    <span class="hljs-attr">name:</span> <span class="hljs-string">dubbo</span><br>    <span class="hljs-attr">port:</span> <span class="hljs-number">-1</span><br>  <span class="hljs-attr">registry:</span><br>    <span class="hljs-attr">id:</span> <span class="hljs-string">nacos-registry</span><br>    <span class="hljs-attr">address:</span> <span class="hljs-string">nacos://localhost:8848</span><br></code></pre></td></tr></table></figure>

<h4 id="额外安装"><a href="#额外安装" class="headerlink" title="额外安装"></a>额外安装</h4><ul>
<li><p>在本地安装 Nacos：<a href="http:">Nacos 下载地址</a></p>
</li>
<li><p>在 Nacos bin 目录下执行以下命令，启动 Nacos：</p>
</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">startup.cmd -m standalone<br></code></pre></td></tr></table></figure>

<h4 id="启动微服务"><a href="#启动微服务" class="headerlink" title="启动微服务"></a>启动微服务</h4><ul>
<li>依次启动 memory-core、memory-gateway、memory-client 微服务</li>
</ul>
<h3 id="前端-1"><a href="#前端-1" class="headerlink" title="前端"></a>前端</h3><p>::: warning 注意<br>确保本地 <code>Node.js 环境配置</code>完成，版本为 <code>v18.x.x</code>及以上<br>:::</p>
<ul>
<li>修改接收请求的后端地址：</li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-attr">baseURL</span>: process.<span class="hljs-property">env</span>.<span class="hljs-property">NODE_ENV</span> === <span class="hljs-string">&#x27;production&#x27;</span> ? <span class="hljs-string">&#x27;http://120.55.62.195:8102&#x27;</span> : <span class="hljs-string">&#x27;http://localhost:8102&#x27;</span>,<br><span class="hljs-attr">withCredentials</span>: <span class="hljs-literal">true</span>,<br></code></pre></td></tr></table></figure>

<ul>
<li>执行以下命令，一键启动前端项目：</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">yarn start:dev<br></code></pre></td></tr></table></figure>

<h2 id="🦪-持续优化"><a href="#🦪-持续优化" class="headerlink" title="🦪 持续优化"></a>🦪 持续优化</h2><p>随着项目的发展和用户需求的增加，我们将持续优化系统性能，提升用户体验。</p>
<p>加强系统的安全性措施，定期进行安全审计和漏洞扫描，确保用户数据的安全。引入微服务架构将项目向容器化部署发展，确保系统的可扩展性和灵活性。</p>
<p>同时将引入持续集成与部署的流程，实现自动化测试和部署上线，降低运维成本。</p>
<h2 id="前端框架搭建"><a href="#前端框架搭建" class="headerlink" title="前端框架搭建"></a>前端框架搭建</h2><h3 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h3><ul>
<li><h5 id="前端框架使用-ant-desigin-pro-快速搭建"><a href="#前端框架使用-ant-desigin-pro-快速搭建" class="headerlink" title="前端框架使用 ant desigin pro 快速搭建"></a>前端框架使用 ant desigin pro 快速搭建</h5></li>
<li><h5 id="官网：开始使用-Ant-Design-Pro"><a href="#官网：开始使用-Ant-Design-Pro" class="headerlink" title="官网：开始使用 - Ant Design Pro"></a>官网：<a target="_blank" rel="noopener" href="https://pro.ant.design/zh-CN/docs/getting-started">开始使用 - Ant Design Pro</a></h5></li>
</ul>
<h3 id="搭建"><a href="#搭建" class="headerlink" title="搭建"></a>搭建</h3><ul>
<li><h5 id="在正确安装Node-js环境下的前提下，依次执行以下命令："><a href="#在正确安装Node-js环境下的前提下，依次执行以下命令：" class="headerlink" title="在正确安装Node.js环境下的前提下，依次执行以下命令："></a>在正确安装Node.js环境下的前提下，依次执行以下命令：</h5></li>
<li><h5 id="使用npm全局安装-pro-cli-构建工具（脚手架）："><a href="#使用npm全局安装-pro-cli-构建工具（脚手架）：" class="headerlink" title="使用npm全局安装 pro-cli 构建工具（脚手架）："></a>使用npm全局安装 pro-cli 构建工具（脚手架）：</h5></li>
</ul>
<figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-built_in">npm</span> i @ant-design/pro-cli -g<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="使用脚手架，在指定目录下快速搭建前端框架："><a href="#使用脚手架，在指定目录下快速搭建前端框架：" class="headerlink" title="使用脚手架，在指定目录下快速搭建前端框架："></a>使用脚手架，在指定目录下快速搭建前端框架：</h5></li>
</ul>
<figure class="highlight stata"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs stata"><span class="hljs-keyword">pro</span> create <span class="hljs-keyword">memory</span>-api <br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="项目下安装yarn包管理工具："><a href="#项目下安装yarn包管理工具：" class="headerlink" title="项目下安装yarn包管理工具："></a>项目下安装yarn包管理工具：</h5></li>
</ul>
<figure class="highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ebnf"><span class="hljs-attribute">yarn -V</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="至此，前端项目框架搭建完成，启动项目："><a href="#至此，前端项目框架搭建完成，启动项目：" class="headerlink" title="至此，前端项目框架搭建完成，启动项目："></a>至此，前端项目框架搭建完成，启动项目：</h5></li>
</ul>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">yarn <span class="hljs-built_in">run</span> start<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230711232614130.png" alt="image-20230711232614130"></p>
<ul>
<li><h5 id="执行效果如下："><a href="#执行效果如下：" class="headerlink" title="执行效果如下："></a>执行效果如下：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230711232655300.png" alt="image-20230711232655300"></p>
<ul>
<li><h5 id="登录页面，效果如下："><a href="#登录页面，效果如下：" class="headerlink" title="登录页面，效果如下："></a>登录页面，效果如下：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230711232732396.png" alt="image-20230711232732396"></p>
<h3 id="踩坑经历"><a href="#踩坑经历" class="headerlink" title="踩坑经历"></a>踩坑经历</h3><ul>
<li><h5 id="如果未安装yarn工具，而直接启动项目，会报如下错误："><a href="#如果未安装yarn工具，而直接启动项目，会报如下错误：" class="headerlink" title="如果未安装yarn工具，而直接启动项目，会报如下错误："></a>如果未安装yarn工具，而直接启动项目，会报如下错误：</h5></li>
</ul>
<ul>
<li><h5 id="如上所示，这是因为项目启动时，会使用到yarn包管理工具"><a href="#如上所示，这是因为项目启动时，会使用到yarn包管理工具" class="headerlink" title="如上所示，这是因为项目启动时，会使用到yarn包管理工具"></a>如上所示，这是因为项目启动时，会使用到yarn包管理工具</h5></li>
<li><h5 id="当我使用如下start-dev启动项目时，项目启动无误但登录不成功，这里先不深究，放一篇解决方法作为参照："><a href="#当我使用如下start-dev启动项目时，项目启动无误但登录不成功，这里先不深究，放一篇解决方法作为参照：" class="headerlink" title="当我使用如下start:dev启动项目时，项目启动无误但登录不成功，这里先不深究，放一篇解决方法作为参照："></a>当我使用如下start:dev启动项目时，项目启动无误但登录不成功，这里先不深究，放一篇解决方法作为参照：</h5></li>
<li><h5 id="🧐问题-【关于登录】本地新项目，使用隐身模式打开无法登录，一直跳-login页面-·-Issue-5573-·-ant-design-ant-design-pro-·-GitHub"><a href="#🧐问题-【关于登录】本地新项目，使用隐身模式打开无法登录，一直跳-login页面-·-Issue-5573-·-ant-design-ant-design-pro-·-GitHub" class="headerlink" title="[🧐问题]【关于登录】本地新项目，使用隐身模式打开无法登录，一直跳/login页面 · Issue #5573 · ant-design/ant-design-pro · GitHub"></a>[🧐<a target="_blank" rel="noopener" href="https://github.com/ant-design/ant-design-pro/issues/5573">问题]【关于登录】本地新项目，使用隐身模式打开无法登录，一直跳/login页面 · Issue #5573 · ant-design/ant-design-pro · GitHub</a></h5></li>
</ul>
<h2 id="后端框架搭建"><a href="#后端框架搭建" class="headerlink" title="后端框架搭建"></a>后端框架搭建</h2><h3 id="介绍-1"><a href="#介绍-1" class="headerlink" title="介绍"></a>介绍</h3><ul>
<li><h5 id="后端框架直接拉取-springboot-init-项目模板，完成了后端框架的快速搭建"><a href="#后端框架直接拉取-springboot-init-项目模板，完成了后端框架的快速搭建" class="headerlink" title="后端框架直接拉取 springboot-init 项目模板，完成了后端框架的快速搭建"></a>后端框架直接拉取 springboot-init 项目模板，完成了后端框架的快速搭建</h5></li>
<li><h5 id="有关具体的模板功能介绍，请移步至：SQL之父：sql-father-backend-public"><a href="#有关具体的模板功能介绍，请移步至：SQL之父：sql-father-backend-public" class="headerlink" title="有关具体的模板功能介绍，请移步至：SQL之父：sql-father-backend-public"></a>有关具体的模板功能介绍，请移步至：<a target="_blank" rel="noopener" href="https://github.com/liyupi/sql-father-backend-public">SQL之父：sql-father-backend-public</a></h5></li>
</ul>
<h3 id="建库建表"><a href="#建库建表" class="headerlink" title="建库建表"></a>建库建表</h3><ul>
<li><h5 id="新建接口信息表，建表信息如下：（2023-07-15晚）"><a href="#新建接口信息表，建表信息如下：（2023-07-15晚）" class="headerlink" title="新建接口信息表，建表信息如下：（2023/07/15晚）"></a>新建接口信息表，建表信息如下：（2023/07/15晚）</h5></li>
</ul>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs sql"><span class="hljs-comment">-- 接口信息表</span><br>use memory_api;<br><span class="hljs-keyword">create</span> <span class="hljs-keyword">table</span> if <span class="hljs-keyword">not</span> <span class="hljs-keyword">exists</span> interface_info<br>(<br>    `id` <span class="hljs-type">bigint</span> <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> auto_increment comment <span class="hljs-string">&#x27;主键&#x27;</span> <span class="hljs-keyword">primary</span> key,<br>    `name` <span class="hljs-type">varchar</span>(<span class="hljs-number">256</span>) <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;用户名&#x27;</span>,<br>    `description` <span class="hljs-type">varchar</span>(<span class="hljs-number">256</span>) <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;描述&#x27;</span>,<br>    `url` <span class="hljs-type">varchar</span>(<span class="hljs-number">512</span>) <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;接口地址&#x27;</span>,<br>    `requestHeader` text <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;请求头&#x27;</span>,<br>    `responseHeader` text <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;响应头&#x27;</span>,<br>    `userId` <span class="hljs-type">varchar</span>(<span class="hljs-number">256</span>) <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;创建人&#x27;</span>,<br>    `status` <span class="hljs-type">int</span> <span class="hljs-keyword">default</span> <span class="hljs-number">0</span> <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;接口状态（0 - 关闭， 1 - 开启））&#x27;</span>,<br>    `<span class="hljs-keyword">method</span>` <span class="hljs-type">varchar</span>(<span class="hljs-number">256</span>) <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;请求类型&#x27;</span>,<br>    `createTime` datetime <span class="hljs-keyword">default</span> <span class="hljs-built_in">CURRENT_TIMESTAMP</span> <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;创建时间&#x27;</span>,<br>    `updateTime` datetime <span class="hljs-keyword">default</span> <span class="hljs-built_in">CURRENT_TIMESTAMP</span> <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> <span class="hljs-keyword">on</span> <span class="hljs-keyword">update</span> <span class="hljs-built_in">CURRENT_TIMESTAMP</span> comment <span class="hljs-string">&#x27;更新时间&#x27;</span>,<br>    `isDelete` tinyint <span class="hljs-keyword">default</span> <span class="hljs-number">0</span> <span class="hljs-keyword">not</span> <span class="hljs-keyword">null</span> comment <span class="hljs-string">&#x27;是否删除(0-未删, 1-已删)&#x27;</span><br>) comment <span class="hljs-string">&#x27;接口信息表&#x27;</span>;<br></code></pre></td></tr></table></figure>

<h3 id="实体类映射"><a href="#实体类映射" class="headerlink" title="实体类映射"></a>实体类映射</h3><ul>
<li><h5 id="将interface-info表映射为实体类，"><a href="#将interface-info表映射为实体类，" class="headerlink" title="将interface_info表映射为实体类，"></a>将interface_info表映射为实体类，</h5></li>
<li><h5 id="这一步我们借助MybatisX-Generator插件来完成（具体使用方法可移步至《掌握-JetBrains-IntelliJ-IDEA：使用心得与技巧》一文中学习了解）"><a href="#这一步我们借助MybatisX-Generator插件来完成（具体使用方法可移步至《掌握-JetBrains-IntelliJ-IDEA：使用心得与技巧》一文中学习了解）" class="headerlink" title="这一步我们借助MybatisX-Generator插件来完成（具体使用方法可移步至《掌握-JetBrains-IntelliJ-IDEA：使用心得与技巧》一文中学习了解）"></a>这一步我们借助MybatisX-Generator插件来完成（具体使用方法可移步至《掌握-JetBrains-IntelliJ-IDEA：使用心得与技巧》一文中学习了解）</h5></li>
<li><h5 id="InterfaceInfo接口信息类："><a href="#InterfaceInfo接口信息类：" class="headerlink" title="InterfaceInfo接口信息类："></a>InterfaceInfo接口信息类：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 接口信息表</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@TableName</span> interface_info</span><br><span class="hljs-comment"> */</span><br><span class="hljs-meta">@TableName(value =&quot;interface_info&quot;)</span><br><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">InterfaceInfo</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">Serializable</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 主键</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableId(value = &quot;id&quot;, type = IdType.AUTO)</span><br>    <span class="hljs-keyword">private</span> Long id;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 用户名</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;name&quot;)</span><br>    <span class="hljs-keyword">private</span> String name;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 描述</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;description&quot;)</span><br>    <span class="hljs-keyword">private</span> String description;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 接口地址</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;url&quot;)</span><br>    <span class="hljs-keyword">private</span> String url;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 请求头</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;requestHeader&quot;)</span><br>    <span class="hljs-keyword">private</span> String requestHeader;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 响应头</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;responseHeader&quot;)</span><br>    <span class="hljs-keyword">private</span> String responseHeader;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 创建人</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;userId&quot;)</span><br>    <span class="hljs-keyword">private</span> String userId;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 接口状态（0 - 关闭， 1 - 开启））</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;status&quot;)</span><br>    <span class="hljs-keyword">private</span> Integer status;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 请求类型</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;method&quot;)</span><br>    <span class="hljs-keyword">private</span> String method;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 创建时间</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;createTime&quot;)</span><br>    <span class="hljs-keyword">private</span> Date createTime;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 更新时间</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;updateTime&quot;)</span><br>    <span class="hljs-keyword">private</span> Date updateTime;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 是否删除(0-未删, 1-已删)</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;isDelete&quot;)</span><br>    <span class="hljs-meta">@TableLogic</span><br>    <span class="hljs-keyword">private</span> Integer isDelete;<br><br>    <span class="hljs-meta">@TableField(exist = false)</span><br>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-type">long</span> <span class="hljs-variable">serialVersionUID</span> <span class="hljs-operator">=</span> <span class="hljs-number">1L</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="前端请求参数封装"><a href="#前端请求参数封装" class="headerlink" title="前端请求参数封装"></a>前端请求参数封装</h3><ul>
<li><h5 id="在实体类基础上，封装前端请求参数类，处理前端发送的HTTP请求，前端人员使用接口文档调试更加方便："><a href="#在实体类基础上，封装前端请求参数类，处理前端发送的HTTP请求，前端人员使用接口文档调试更加方便：" class="headerlink" title="在实体类基础上，封装前端请求参数类，处理前端发送的HTTP请求，前端人员使用接口文档调试更加方便："></a>在实体类基础上，封装前端请求参数类，处理前端发送的HTTP请求，前端人员使用接口文档调试更加方便：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 创建请求</span><br><span class="hljs-comment"> *</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> &lt;a href=&quot;https://github.com/liyupi&quot;&gt;程序员鱼皮&lt;/a&gt;</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@from</span> &lt;a href=&quot;https://yupi.icu&quot;&gt;编程导航知识星球&lt;/a&gt;</span><br><span class="hljs-comment"> */</span><br><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">InterfaceInfoAddRequest</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">Serializable</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 用户名</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;name&quot;)</span><br>    <span class="hljs-keyword">private</span> String name;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 描述</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;description&quot;)</span><br>    <span class="hljs-keyword">private</span> String description;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 接口地址</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;url&quot;)</span><br>    <span class="hljs-keyword">private</span> String url;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 请求头</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;requestHeader&quot;)</span><br>    <span class="hljs-keyword">private</span> String requestHeader;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 响应头</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;responseHeader&quot;)</span><br>    <span class="hljs-keyword">private</span> String responseHeader;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 创建人</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;userId&quot;)</span><br>    <span class="hljs-keyword">private</span> Long userId;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 请求类型</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;method&quot;)</span><br>    <span class="hljs-keyword">private</span> String method;<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 查询请求</span><br><span class="hljs-comment"> *</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> &lt;a href=&quot;https://github.com/liyupi&quot;&gt;程序员鱼皮&lt;/a&gt;</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@from</span> &lt;a href=&quot;https://yupi.icu&quot;&gt;编程导航知识星球&lt;/a&gt;</span><br><span class="hljs-comment"> */</span><br><span class="hljs-meta">@EqualsAndHashCode(callSuper = true)</span><br><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">InterfaceInfoQueryRequest</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">PageRequest</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">Serializable</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 主键</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableId(value = &quot;id&quot;, type = IdType.AUTO)</span><br>    <span class="hljs-keyword">private</span> Long id;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 用户名</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;name&quot;)</span><br>    <span class="hljs-keyword">private</span> String name;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 描述</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;description&quot;)</span><br>    <span class="hljs-keyword">private</span> String description;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 接口地址</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;url&quot;)</span><br>    <span class="hljs-keyword">private</span> String url;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 请求头</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;requestHeader&quot;)</span><br>    <span class="hljs-keyword">private</span> String requestHeader;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 响应头</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;responseHeader&quot;)</span><br>    <span class="hljs-keyword">private</span> String responseHeader;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 创建人</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;userId&quot;)</span><br>    <span class="hljs-keyword">private</span> Long userId;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 接口状态（0 - 关闭， 1 - 开启））</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;status&quot;)</span><br>    <span class="hljs-keyword">private</span> Integer status;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 请求类型</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;method&quot;)</span><br>    <span class="hljs-keyword">private</span> String method;<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 更新请求</span><br><span class="hljs-comment"> *</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> &lt;a href=&quot;https://github.com/liyupi&quot;&gt;程序员鱼皮&lt;/a&gt;</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@from</span> &lt;a href=&quot;https://yupi.icu&quot;&gt;编程导航知识星球&lt;/a&gt;</span><br><span class="hljs-comment"> */</span><br><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">InterfaceInfoUpdateRequest</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">Serializable</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 主键</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableId(value = &quot;id&quot;, type = IdType.AUTO)</span><br>    <span class="hljs-keyword">private</span> Long id;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 用户名</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;name&quot;)</span><br>    <span class="hljs-keyword">private</span> String name;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 描述</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;description&quot;)</span><br>    <span class="hljs-keyword">private</span> String description;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 接口地址</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;url&quot;)</span><br>    <span class="hljs-keyword">private</span> String url;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 请求头</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;requestHeader&quot;)</span><br>    <span class="hljs-keyword">private</span> String requestHeader;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 响应头</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;responseHeader&quot;)</span><br>    <span class="hljs-keyword">private</span> String responseHeader;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 接口状态（0 - 关闭， 1 - 开启））</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;status&quot;)</span><br>    <span class="hljs-keyword">private</span> Integer status;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 请求类型</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@TableField(value = &quot;method&quot;)</span><br>    <span class="hljs-keyword">private</span> String method;<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="后端接口实现"><a href="#后端接口实现" class="headerlink" title="后端接口实现"></a>后端接口实现</h3><ul>
<li><h5 id="service层："><a href="#service层：" class="headerlink" title="service层："></a>service层：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 参数校验</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> interfaceInfo</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> add</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@Override</span><br>   <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">validInterfaceInfo</span><span class="hljs-params">(InterfaceInfo interfaceInfo, <span class="hljs-type">boolean</span> add)</span> &#123;<br>       <span class="hljs-keyword">if</span> (interfaceInfo == <span class="hljs-literal">null</span>) &#123;<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARAMS_ERROR);<br>       &#125;<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="controller层：（处理增、删、改、查需求）"><a href="#controller层：（处理增、删、改、查需求）" class="headerlink" title="controller层：（处理增、删、改、查需求）"></a>controller层：（处理增、删、改、查需求）</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 创建接口</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> interfaceInfoAddRequest 创建接口参数</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> request                 request</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 创建接口成功</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@PostMapping(&quot;/add&quot;)</span><br>   <span class="hljs-keyword">public</span> BaseResponse&lt;Long&gt; <span class="hljs-title function_">addInterfaceInfo</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> InterfaceInfoAddRequest interfaceInfoAddRequest,</span><br><span class="hljs-params">                                              HttpServletRequest request)</span> &#123;<br>       <span class="hljs-keyword">if</span> (interfaceInfoAddRequest == <span class="hljs-literal">null</span>) &#123;<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARAMS_ERROR);<br>       &#125;<br><br>       <span class="hljs-type">InterfaceInfo</span> <span class="hljs-variable">interfaceInfo</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">InterfaceInfo</span>();<br>       BeanUtils.copyProperties(interfaceInfoAddRequest, interfaceInfo);<br>       interfaceInfoService.validInterfaceInfo(interfaceInfo, <span class="hljs-literal">true</span>);<br><br>       <span class="hljs-type">User</span> <span class="hljs-variable">loginUser</span> <span class="hljs-operator">=</span> userService.getLoginUser(request);<br>       interfaceInfo.setUserId(loginUser.getId());<br><br>       <span class="hljs-type">boolean</span> <span class="hljs-variable">result</span> <span class="hljs-operator">=</span> interfaceInfoService.save(interfaceInfo);<br>       ThrowUtils.throwIf(!result, ErrorCode.OPERATION_ERROR);<br><br>       <span class="hljs-type">long</span> <span class="hljs-variable">newInterfaceInfoId</span> <span class="hljs-operator">=</span> interfaceInfo.getId();<br>       <span class="hljs-keyword">return</span> ResultUtils.success(newInterfaceInfoId);<br>   &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 删除接口</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> deleteRequest 删除接口参数</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> request       request</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 删除接口成功</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@PostMapping(&quot;/delete&quot;)</span><br>   <span class="hljs-keyword">public</span> BaseResponse&lt;Boolean&gt; <span class="hljs-title function_">deleteInterfaceInfo</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> DeleteRequest deleteRequest, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-keyword">if</span> (deleteRequest == <span class="hljs-literal">null</span> || deleteRequest.getId() &lt;= <span class="hljs-number">0</span>) &#123;<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARAMS_ERROR);<br>       &#125;<br><br>       <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> userService.getLoginUser(request);<br>       <span class="hljs-type">long</span> <span class="hljs-variable">id</span> <span class="hljs-operator">=</span> deleteRequest.getId();<br><br>       <span class="hljs-comment">// 判断是否存在</span><br>       <span class="hljs-type">InterfaceInfo</span> <span class="hljs-variable">oldInterfaceInfo</span> <span class="hljs-operator">=</span> interfaceInfoService.getById(id);<br>       ThrowUtils.throwIf(oldInterfaceInfo == <span class="hljs-literal">null</span>, ErrorCode.NOT_FOUND_ERROR);<br><br>       <span class="hljs-comment">// 仅本人或管理员可删除</span><br>       <span class="hljs-keyword">if</span> (!oldInterfaceInfo.getUserId().equals(user.getId()) &amp;&amp; !userService.isAdmin(request)) &#123;<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NO_AUTH_ERROR);<br>       &#125;<br><br>       <span class="hljs-type">boolean</span> <span class="hljs-variable">b</span> <span class="hljs-operator">=</span> interfaceInfoService.removeById(id);<br>       <span class="hljs-keyword">return</span> ResultUtils.success(b);<br>   &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 更新接口（仅管理员）</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> interfaceInfoUpdateRequest 更新接口参数</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 更新接口成功</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@PostMapping(&quot;/update&quot;)</span><br>   <span class="hljs-meta">@AuthCheck(mustRole = UserConstant.ADMIN_ROLE)</span><br>   <span class="hljs-keyword">public</span> BaseResponse&lt;Boolean&gt; <span class="hljs-title function_">updateInterfaceInfo</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> InterfaceInfoUpdateRequest interfaceInfoUpdateRequest)</span> &#123;<br>       <span class="hljs-keyword">if</span> (interfaceInfoUpdateRequest == <span class="hljs-literal">null</span> || interfaceInfoUpdateRequest.getId() &lt;= <span class="hljs-number">0</span>) &#123;<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARAMS_ERROR);<br>       &#125;<br><br>       <span class="hljs-type">InterfaceInfo</span> <span class="hljs-variable">interfaceInfo</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">InterfaceInfo</span>();<br>       BeanUtils.copyProperties(interfaceInfoUpdateRequest, interfaceInfo);<br>       interfaceInfoService.validInterfaceInfo(interfaceInfo, <span class="hljs-literal">false</span>);<br><br>       <span class="hljs-type">long</span> <span class="hljs-variable">id</span> <span class="hljs-operator">=</span> interfaceInfoUpdateRequest.getId();<br>       <span class="hljs-type">InterfaceInfo</span> <span class="hljs-variable">oldInterfaceInfo</span> <span class="hljs-operator">=</span> interfaceInfoService.getById(id);<br>       ThrowUtils.throwIf(oldInterfaceInfo == <span class="hljs-literal">null</span>, ErrorCode.NOT_FOUND_ERROR);<br><br>       <span class="hljs-type">boolean</span> <span class="hljs-variable">result</span> <span class="hljs-operator">=</span> interfaceInfoService.updateById(interfaceInfo);<br>       <span class="hljs-keyword">return</span> ResultUtils.success(result);<br>   &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">    * 根据id获取接口信息</span><br><span class="hljs-comment">    *</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@param</span> id 接口id</span><br><span class="hljs-comment">    * <span class="hljs-doctag">@return</span> 接口信息</span><br><span class="hljs-comment">    */</span><br>   <span class="hljs-meta">@GetMapping(&quot;/get&quot;)</span><br>   <span class="hljs-keyword">public</span> BaseResponse&lt;InterfaceInfo&gt; <span class="hljs-title function_">getInterfaceInfoById</span><span class="hljs-params">(<span class="hljs-type">long</span> id, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-keyword">if</span> (id &lt;= <span class="hljs-number">0</span>) &#123;<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARAMS_ERROR);<br>       &#125;<br><br>       <span class="hljs-type">InterfaceInfo</span> <span class="hljs-variable">interfaceInfo</span> <span class="hljs-operator">=</span> interfaceInfoService.getById(id);<br><br>       <span class="hljs-keyword">if</span> (interfaceInfo == <span class="hljs-literal">null</span>) &#123;<br>           <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_FOUND_ERROR);<br>       &#125;<br><br>       <span class="hljs-keyword">return</span> ResultUtils.success(interfaceInfo);<br>   &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 获取接口信息列表</span><br><span class="hljs-comment">     * 分页查询</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> interfaceInfoQueryRequest 查询参数</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> request                   request</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 接口信息列表</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@PostMapping(&quot;/list/page&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;Page&lt;InterfaceInfo&gt;&gt; <span class="hljs-title function_">listInterfaceInfoByPage</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> InterfaceInfoQueryRequest interfaceInfoQueryRequest,</span><br><span class="hljs-params">                                                                     HttpServletRequest request)</span> &#123;<br>        <span class="hljs-keyword">if</span> (interfaceInfoQueryRequest == <span class="hljs-literal">null</span> || interfaceInfoQueryRequest.getId() &lt;= <span class="hljs-number">0</span>) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARAMS_ERROR);<br>        &#125;<br><br>        <span class="hljs-type">long</span> <span class="hljs-variable">current</span> <span class="hljs-operator">=</span> interfaceInfoQueryRequest.getCurrent();<br>        <span class="hljs-type">long</span> <span class="hljs-variable">size</span> <span class="hljs-operator">=</span> interfaceInfoQueryRequest.getPageSize();<br><br>        <span class="hljs-type">InterfaceInfo</span> <span class="hljs-variable">interfaceInfo</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">InterfaceInfo</span>();<br>        BeanUtils.copyProperties(interfaceInfoQueryRequest, interfaceInfo);<br>        interfaceInfoService.validInterfaceInfo(interfaceInfo, <span class="hljs-literal">false</span>);<br><br>        <span class="hljs-comment">// 限制爬虫</span><br>        ThrowUtils.throwIf(size &gt; <span class="hljs-number">20</span>, ErrorCode.PARAMS_ERROR);<br><br>        Page&lt;InterfaceInfo&gt; interfaceInfoPage = interfaceInfoService.page(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Page</span>&lt;&gt;(current, size));<br>        <span class="hljs-keyword">return</span> ResultUtils.success(interfaceInfoPage);<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="成功运行项目，接口文档调试页面正常：（2023-07-19晚）"><a href="#成功运行项目，接口文档调试页面正常：（2023-07-19晚）" class="headerlink" title="成功运行项目，接口文档调试页面正常：（2023/07/19晚）"></a>成功运行项目，接口文档调试页面正常：（2023/07/19晚）</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230719101803347.png" alt="image-20230719101803347"></p>
<h2 id="前端开发"><a href="#前端开发" class="headerlink" title="前端开发"></a>前端开发</h2><ul>
<li><h5 id="他奶奶的，早上启动前端项目时，发现报错了："><a href="#他奶奶的，早上启动前端项目时，发现报错了：" class="headerlink" title="他奶奶的，早上启动前端项目时，发现报错了："></a>他奶奶的，早上启动前端项目时，发现报错了：</h5></li>
</ul>
<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230720104434926.png" alt="image-20230720104434926"></p>
<ul>
<li><h5 id="看起来好像是少了什么依赖，但我也没动这依赖啊，不好搞。"><a href="#看起来好像是少了什么依赖，但我也没动这依赖啊，不好搞。" class="headerlink" title="看起来好像是少了什么依赖，但我也没动这依赖啊，不好搞。"></a>看起来好像是少了什么依赖，但我也没动这依赖啊，不好搞。</h5></li>
<li><h5 id="于是我直接全部重新构建了下前端项目，可以跑起来了"><a href="#于是我直接全部重新构建了下前端项目，可以跑起来了" class="headerlink" title="于是我直接全部重新构建了下前端项目，可以跑起来了"></a>于是我直接全部重新构建了下前端项目，可以跑起来了</h5></li>
<li><h5 id="2023-10-03早，时隔3个月，终于解决了这个疑惑："><a href="#2023-10-03早，时隔3个月，终于解决了这个疑惑：" class="headerlink" title="2023/10/03早，时隔3个月，终于解决了这个疑惑："></a>2023/10/03早，时隔3个月，终于解决了这个疑惑：</h5><ul>
<li><h5 id="出现这个报错一定是因为在项目构建完成后，移动了项目所在文件夹的路径（2023-10-03早）"><a href="#出现这个报错一定是因为在项目构建完成后，移动了项目所在文件夹的路径（2023-10-03早）" class="headerlink" title="出现这个报错一定是因为在项目构建完成后，移动了项目所在文件夹的路径（2023/10/03早）"></a>出现这个报错一定是因为在项目构建完成后，移动了项目所在文件夹的路径（2023/10/03早）</h5></li>
</ul>
</li>
<li><h5 id="拿到-Ant-Design-Pro前端框架后，要做四件事："><a href="#拿到-Ant-Design-Pro前端框架后，要做四件事：" class="headerlink" title="拿到 Ant Design Pro前端框架后，要做四件事："></a>拿到 Ant Design Pro前端框架后，要做四件事：</h5><ul>
<li><h5 id="修改登录页面"><a href="#修改登录页面" class="headerlink" title="修改登录页面"></a>修改登录页面</h5></li>
<li><h5 id="新增注册页面"><a href="#新增注册页面" class="headerlink" title="新增注册页面"></a>新增注册页面</h5></li>
<li><h5 id="生成请求接口"><a href="#生成请求接口" class="headerlink" title="生成请求接口"></a>生成请求接口</h5></li>
<li><h5 id="保存用户登录态"><a href="#保存用户登录态" class="headerlink" title="保存用户登录态"></a>保存用户登录态</h5></li>
<li><h5 id="修改表单获取后台信息"><a href="#修改表单获取后台信息" class="headerlink" title="修改表单获取后台信息"></a>修改表单获取后台信息</h5></li>
</ul>
</li>
</ul>
<h4 id="修改登录页面-1"><a href="#修改登录页面-1" class="headerlink" title="修改登录页面"></a>修改登录页面</h4><figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&lt;<span class="hljs-title class_">LoginForm</span><br>         contentStyle=&#123;&#123;<br>           <span class="hljs-attr">minWidth</span>: <span class="hljs-number">280</span>,<br>           <span class="hljs-attr">maxWidth</span>: <span class="hljs-string">&#x27;75vw&#x27;</span>,<br>         &#125;&#125;<br>         logo=&#123;<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;logo&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;/logo.svg&quot;</span> /&gt;</span></span>&#125;<br>         title=<span class="hljs-string">&quot;Memory API&quot;</span><br>         subTitle=&#123;intl.<span class="hljs-title function_">formatMessage</span>(&#123; <span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;pages.layouts.userLayout.title&#x27;</span> &#125;)&#125;<br>         initialValues=&#123;&#123;<br>           <span class="hljs-attr">autoLogin</span>: <span class="hljs-literal">true</span>,<br>         &#125;&#125;<br>         actions=&#123;[<br>           <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">FormattedMessage</span></span></span><br><span class="hljs-tag"><span class="language-xml">             <span class="hljs-attr">key</span>=<span class="hljs-string">&quot;loginWith&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">             <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;pages.login.loginWith&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">             <span class="hljs-attr">defaultMessage</span>=<span class="hljs-string">&quot;其他登录方式&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">           /&gt;</span></span>,<br>           <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ActionIcons</span> <span class="hljs-attr">key</span>=<span class="hljs-string">&quot;icons&quot;</span> /&gt;</span></span>,<br>         ]&#125;<br>         onFinish=&#123;<span class="hljs-keyword">async</span> (values) =&gt; &#123;<br>           <span class="hljs-keyword">await</span> <span class="hljs-title function_">handleSubmit</span>(values <span class="hljs-keyword">as</span> <span class="hljs-variable constant_">API</span>.<span class="hljs-property">LoginParams</span>);<br>         &#125;&#125;<br>       &gt;<br></code></pre></td></tr></table></figure>

<h4 id="新增注册页面-1"><a href="#新增注册页面-1" class="headerlink" title="新增注册页面"></a>新增注册页面</h4><ul>
<li><h5 id="基本仿照登录页面，在Page-User下新增Register-index-tsx文件，开发注册页面"><a href="#基本仿照登录页面，在Page-User下新增Register-index-tsx文件，开发注册页面" class="headerlink" title="基本仿照登录页面，在Page/User下新增Register/index.tsx文件，开发注册页面"></a>基本仿照登录页面，在Page/User下新增Register/index.tsx文件，开发注册页面</h5></li>
<li><h5 id="在config-routes-ts下新增Register页面路由："><a href="#在config-routes-ts下新增Register页面路由：" class="headerlink" title="在config/routes.ts下新增Register页面路由："></a>在config/routes.ts下新增Register页面路由：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> [<br>  &#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/user&#x27;</span>,<br>    <span class="hljs-attr">layout</span>: <span class="hljs-literal">false</span>,<br>    <span class="hljs-attr">routes</span>: [<br>      <span class="hljs-comment">// 登录页</span><br>      &#123;<br>        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;login&#x27;</span>,<br>        <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/user/login&#x27;</span>,<br>        <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./User/Login&#x27;</span>,<br>      &#125;,<br>      <span class="hljs-comment">// 注册页</span><br>      &#123;<br>        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;register&#x27;</span>,<br>        <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/user/register&#x27;</span>,<br>        <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./User/Register&#x27;</span>,<br>      &#125;,<br>    ],<br>    <br>    ..............................<br>  &#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="修改app-tsx文件，修改跳转login页的逻辑："><a href="#修改app-tsx文件，修改跳转login页的逻辑：" class="headerlink" title="修改app.tsx文件，修改跳转login页的逻辑："></a>修改app.tsx文件，修改跳转login页的逻辑：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">const</span> isDev = process.<span class="hljs-property">env</span>.<span class="hljs-property">NODE_ENV</span> === <span class="hljs-string">&#x27;development&#x27;</span>;<br><span class="hljs-keyword">const</span> loginPath = <span class="hljs-string">&#x27;/user/login&#x27;</span>;<br><span class="hljs-keyword">const</span> registerPath = <span class="hljs-string">&#x27;/user/register&#x27;</span>;<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">export</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">getInitialState</span>(<span class="hljs-params"></span>): <span class="hljs-title class_">Promise</span>&lt;&#123;<br>  settings?: <span class="hljs-title class_">Partial</span>&lt;<span class="hljs-title class_">LayoutSettings</span>&gt;;<br>  currentUser?: <span class="hljs-variable constant_">API</span>.<span class="hljs-property">CurrentUser</span>;<br>  loading?: <span class="hljs-built_in">boolean</span>;<br>  fetchUserInfo?: <span class="hljs-function">() =&gt;</span> <span class="hljs-title class_">Promise</span>&lt;<span class="hljs-variable constant_">API</span>.<span class="hljs-property">CurrentUser</span> | <span class="hljs-literal">undefined</span>&gt;;<br>&#125;&gt; &#123;<br>  <span class="hljs-comment">// 1.获取当前用户登录态</span><br>  <span class="hljs-keyword">const</span> <span class="hljs-title function_">fetchUserInfo</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>      <span class="hljs-keyword">const</span> msg = <span class="hljs-keyword">await</span> <span class="hljs-title function_">queryCurrentUser</span>(&#123;<br>        <span class="hljs-attr">skipErrorHandler</span>: <span class="hljs-literal">true</span>,<br>      &#125;);<br>      <span class="hljs-keyword">return</span> msg.<span class="hljs-property">data</span>;<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>      history.<span class="hljs-title function_">push</span>(loginPath);<br>    &#125;<br>    <span class="hljs-keyword">return</span> <span class="hljs-literal">undefined</span>;<br>  &#125;;<br><br>  <span class="hljs-comment">// 2.1.非登录/注册页，执行</span><br>  <span class="hljs-keyword">const</span> &#123; location &#125; = history;<br>  <span class="hljs-keyword">if</span> (location.<span class="hljs-property">pathname</span> !== loginPath &amp;&amp; location.<span class="hljs-property">pathname</span> !== registerPath) &#123;<br>    <span class="hljs-keyword">const</span> currentUser = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetchUserInfo</span>();<br>    <span class="hljs-keyword">return</span> &#123;<br>      fetchUserInfo,<br>      currentUser,<br>      <span class="hljs-attr">settings</span>: defaultSettings <span class="hljs-keyword">as</span> <span class="hljs-title class_">Partial</span>&lt;<span class="hljs-title class_">LayoutSettings</span>&gt;,<br>    &#125;;<br>  &#125;<br><br>  <span class="hljs-comment">//2.2.登录/注册页，执行</span><br>  <span class="hljs-keyword">return</span> &#123;<br>    fetchUserInfo,<br>    <span class="hljs-attr">settings</span>: defaultSettings <span class="hljs-keyword">as</span> <span class="hljs-title class_">Partial</span>&lt;<span class="hljs-title class_">LayoutSettings</span>&gt;,<br>  &#125;;<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-comment">// 构建页面时</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-attr">layout</span>: <span class="hljs-title class_">RunTimeLayoutConfig</span> = <span class="hljs-function">(<span class="hljs-params">&#123; initialState, setInitialState &#125;</span>) =&gt;</span> &#123;<br>  <span class="hljs-keyword">return</span> &#123;<br>    <span class="hljs-attr">actionsRender</span>: <span class="hljs-function">() =&gt;</span> [<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Question</span> <span class="hljs-attr">key</span>=<span class="hljs-string">&quot;doc&quot;</span> /&gt;</span></span>, <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">SelectLang</span> <span class="hljs-attr">key</span>=<span class="hljs-string">&quot;SelectLang&quot;</span> /&gt;</span></span>],<br>    <span class="hljs-comment">// 获取头像</span><br>    <span class="hljs-attr">avatarProps</span>: &#123;<br>      <span class="hljs-attr">src</span>: initialState?.<span class="hljs-property">currentUser</span>?.<span class="hljs-property">avatar</span>,<br>      <span class="hljs-attr">title</span>: <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">AvatarName</span> /&gt;</span></span>,<br>      <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">_, avatarChildren</span>) =&gt;</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">AvatarDropdown</span>&gt;</span>&#123;avatarChildren&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">AvatarDropdown</span>&gt;</span></span>;<br>      &#125;,<br>    &#125;,<br>    <span class="hljs-comment">// 获取水印</span><br>    <span class="hljs-attr">waterMarkProps</span>: &#123;<br>      <span class="hljs-attr">content</span>: initialState?.<span class="hljs-property">currentUser</span>?.<span class="hljs-property">name</span>,<br>    &#125;,<br>    <span class="hljs-comment">// 获取脚标</span><br>    <span class="hljs-attr">footerRender</span>: <span class="hljs-function">() =&gt;</span> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Footer</span> /&gt;</span></span>,<br>    <span class="hljs-comment">// 监测登录状态</span><br>    <span class="hljs-attr">onPageChange</span>: <span class="hljs-function">() =&gt;</span> &#123;<br>      <span class="hljs-keyword">const</span> &#123; location &#125; = history;<br>      <span class="hljs-comment">// 如果没有登录，且非登录/注册页面，重定向到 login</span><br>      <span class="hljs-keyword">if</span> (<br>        !initialState?.<span class="hljs-property">currentUser</span> &amp;&amp;<br>        location.<span class="hljs-property">pathname</span> !== loginPath &amp;&amp;<br>        location.<span class="hljs-property">pathname</span> !== registerPath<br>      ) &#123;<br>        history.<span class="hljs-title function_">push</span>(loginPath);<br>      &#125;<br>    &#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="成功请求到register页面"><a href="#成功请求到register页面" class="headerlink" title="成功请求到register页面"></a>成功请求到register页面</h5></li>
<li><h5 id="下午又更新了下前端对-InterfaceInfo-增、删、改、查的参数校验逻辑"><a href="#下午又更新了下前端对-InterfaceInfo-增、删、改、查的参数校验逻辑" class="headerlink" title="下午又更新了下前端对 InterfaceInfo 增、删、改、查的参数校验逻辑"></a>下午又更新了下前端对 InterfaceInfo 增、删、改、查的参数校验逻辑</h5></li>
<li><h5 id="这里实现了两个枚举类，分别用来判断接口信息的状态和接口的请求方法是否正确："><a href="#这里实现了两个枚举类，分别用来判断接口信息的状态和接口的请求方法是否正确：" class="headerlink" title="这里实现了两个枚举类，分别用来判断接口信息的状态和接口的请求方法是否正确："></a>这里实现了两个枚举类，分别用来判断接口信息的状态和接口的请求方法是否正确：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 接口请求方法</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">enum</span> <span class="hljs-title class_">InterfaceInfoMethodEnum</span> &#123;<br>    GET(<span class="hljs-string">&quot;GET&quot;</span>, <span class="hljs-string">&quot;GET方法&quot;</span>),<br><br>    POST(<span class="hljs-string">&quot;POST&quot;</span>, <span class="hljs-string">&quot;POST方法&quot;</span>);<br><br>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> String value;<br>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> String text;<br><br>    InterfaceInfoMethodEnum(String value, String text) &#123;<br>        <span class="hljs-built_in">this</span>.value = value;<br>        <span class="hljs-built_in">this</span>.text = text;<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 判断接口请求方法</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> value 接口请求方法</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 存在与否</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> InterfaceInfoMethodEnum <span class="hljs-title function_">getEnumByValue</span><span class="hljs-params">(String value)</span> &#123;<br>        <span class="hljs-keyword">if</span> (value == <span class="hljs-literal">null</span>) &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>        &#125;<br>        InterfaceInfoMethodEnum[] values = InterfaceInfoMethodEnum.values();<br>        <span class="hljs-keyword">for</span> (InterfaceInfoMethodEnum infoStatusEnum : values) &#123;<br>            <span class="hljs-keyword">if</span> (infoStatusEnum.getValue().equals(value)) &#123;<br>                <span class="hljs-keyword">return</span> infoStatusEnum;<br>            &#125;<br>        &#125;<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>    &#125;<br><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getValue</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-keyword">return</span> value;<br>    &#125;<br><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getText</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-keyword">return</span> text;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 接口状态</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">enum</span> <span class="hljs-title class_">InterfaceInfoStatusEnum</span> &#123;<br>    USUAL(<span class="hljs-number">0</span>, <span class="hljs-string">&quot;正常&quot;</span>),<br><br>    ERROR(<span class="hljs-number">1</span>, <span class="hljs-string">&quot;错误&quot;</span>);<br><br>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> <span class="hljs-type">int</span> value;<br>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">final</span> String text;<br><br>    InterfaceInfoStatusEnum(<span class="hljs-type">int</span> value, String text) &#123;<br>        <span class="hljs-built_in">this</span>.value = value;<br>        <span class="hljs-built_in">this</span>.text = text;<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 判断接口状态</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> value 接口状态</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 存在与否</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> InterfaceInfoStatusEnum <span class="hljs-title function_">getEnumByValue</span><span class="hljs-params">(Integer value)</span> &#123;<br>        <span class="hljs-keyword">if</span> (value == <span class="hljs-literal">null</span>) &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>        &#125;<br>        InterfaceInfoStatusEnum[] values = InterfaceInfoStatusEnum.values();<br>        <span class="hljs-keyword">for</span> (InterfaceInfoStatusEnum infoStatusEnum : values) &#123;<br>            <span class="hljs-keyword">if</span> (infoStatusEnum.getValue() == value) &#123;<br>                <span class="hljs-keyword">return</span> infoStatusEnum;<br>            &#125;<br>        &#125;<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;<br>    &#125;<br><br>    <span class="hljs-keyword">public</span> <span class="hljs-type">int</span> <span class="hljs-title function_">getValue</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-keyword">return</span> value;<br>    &#125;<br><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getText</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-keyword">return</span> text;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="生成请求接口-1"><a href="#生成请求接口-1" class="headerlink" title="生成请求接口"></a>生成请求接口</h3><ul>
<li><h5 id="Ant-Design-Pro为我们提供了快速编写请求接口的方法，更加方便前端调用后端接口："><a href="#Ant-Design-Pro为我们提供了快速编写请求接口的方法，更加方便前端调用后端接口：" class="headerlink" title="Ant Design Pro为我们提供了快速编写请求接口的方法，更加方便前端调用后端接口："></a>Ant Design Pro为我们提供了快速编写请求接口的方法，更加方便前端调用后端接口：</h5></li>
<li><h5 id="首先拿到后端生成的接口文档的-json-信息："><a href="#首先拿到后端生成的接口文档的-json-信息：" class="headerlink" title="首先拿到后端生成的接口文档的 json 信息："></a>首先拿到后端生成的接口文档的 json 信息：</h5></li>
</ul>
<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230720232106758.png" alt="image-20230720232106758"></p>
<ul>
<li><h5 id="访问这个地址："><a href="#访问这个地址：" class="headerlink" title="访问这个地址："></a>访问这个地址：</h5></li>
</ul>
<figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs awk">localhost:<span class="hljs-number">8101</span><span class="hljs-regexp">/api/</span>v2/api<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="可以看到该接口文档的所有-json-信息，如下图所示："><a href="#可以看到该接口文档的所有-json-信息，如下图所示：" class="headerlink" title="可以看到该接口文档的所有 json 信息，如下图所示："></a>可以看到该接口文档的所有 json 信息，如下图所示：</h5></li>
</ul>
<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230720232255418.png" alt="image-20230720232255418"></p>
<ul>
<li><h5 id="在前端config-config-ts下，修改相关信息，自动对接后端，生成可调用的接口方法："><a href="#在前端config-config-ts下，修改相关信息，自动对接后端，生成可调用的接口方法：" class="headerlink" title="在前端config/config.ts下，修改相关信息，自动对接后端，生成可调用的接口方法："></a>在前端config/config.ts下，修改相关信息，自动对接后端，生成可调用的接口方法：</h5></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs css">openAPI: [<br>    &#123;<br>      requestLibPath: <span class="hljs-string">&quot;import &#123; request &#125; from &#x27;@umijs/max&#x27;&quot;</span>,<br>      schemaPath: <span class="hljs-string">&#x27;http://localhost:8101/api//v2/api-docs&#x27;</span>,<br>      projectName: <span class="hljs-string">&#x27;memory-api&#x27;</span>,<br>    &#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="输入以下命令，启动项目："><a href="#输入以下命令，启动项目：" class="headerlink" title="输入以下命令，启动项目："></a>输入以下命令，启动项目：</h5></li>
</ul>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">yarn <span class="hljs-built_in">run</span> openapi<br></code></pre></td></tr></table></figure>

<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230720232623522.png" alt="image-20230720232623522"></p>
<ul>
<li><h5 id="在services-memory-api下，生成了与后端对应的接口方法（2023-07-20晚）"><a href="#在services-memory-api下，生成了与后端对应的接口方法（2023-07-20晚）" class="headerlink" title="在services/memory-api下，生成了与后端对应的接口方法（2023/07/20晚）"></a>在services/memory-api下，生成了与后端对应的接口方法（2023/07/20晚）</h5></li>
<li><h5 id="利用SQL之父工具，快速生成了模拟数据"><a href="#利用SQL之父工具，快速生成了模拟数据" class="headerlink" title="利用SQL之父工具，快速生成了模拟数据"></a>利用SQL之父工具，快速生成了模拟数据</h5></li>
</ul>
<h3 id="保存用户登录态-1"><a href="#保存用户登录态-1" class="headerlink" title="保存用户登录态"></a>保存用户登录态</h3><ul>
<li><h5 id="改造了Ant-Design-Pro的代码结构，详情可看《掌握-Ant-Design-Pro：目录结构、业务逻辑与代码改造技巧》（2023-07-21午）"><a href="#改造了Ant-Design-Pro的代码结构，详情可看《掌握-Ant-Design-Pro：目录结构、业务逻辑与代码改造技巧》（2023-07-21午）" class="headerlink" title="改造了Ant Design Pro的代码结构，详情可看《掌握-Ant-Design-Pro：目录结构、业务逻辑与代码改造技巧》（2023/07/21午）"></a>改造了Ant Design Pro的代码结构，详情可看《掌握-Ant-Design-Pro：目录结构、业务逻辑与代码改造技巧》（2023/07/21午）</h5></li>
</ul>
<h2 id="获取在线用户信息"><a href="#获取在线用户信息" class="headerlink" title="获取在线用户信息"></a>获取在线用户信息</h2><ul>
<li><h5 id="他爷爷的，之前提到过的跨域问题，可算解决了，仅仅在-requestErrorConfig-下加一行代码："><a href="#他爷爷的，之前提到过的跨域问题，可算解决了，仅仅在-requestErrorConfig-下加一行代码：" class="headerlink" title="他爷爷的，之前提到过的跨域问题，可算解决了，仅仅在 requestErrorConfig 下加一行代码："></a>他爷爷的，之前提到过的跨域问题，可算解决了，仅仅在 requestErrorConfig 下加一行代码：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-attr">errorConfig</span>: <span class="hljs-title class_">RequestConfig</span> = &#123;<br>  <span class="hljs-attr">baseURL</span>: <span class="hljs-string">&#x27;http://localhost:8101&#x27;</span>,<br>  <span class="hljs-attr">withCredentials</span>: <span class="hljs-literal">true</span>,<br>  <span class="hljs-comment">// 错误处理： umi@3 的错误处理方案。</span><br>  <span class="hljs-attr">errorConfig</span>: &#123;<br>  	..................<br>  &#125;<br>  ........................<br>  &#125;<br></code></pre></td></tr></table></figure>

<h2 id="自定义页面"><a href="#自定义页面" class="headerlink" title="自定义页面"></a>自定义页面</h2><h3 id="注册页"><a href="#注册页" class="headerlink" title="注册页"></a>注册页</h3><ul>
<li><h5 id="这个目前还没做好，日后安排（2023-07-23早）"><a href="#这个目前还没做好，日后安排（2023-07-23早）" class="headerlink" title="这个目前还没做好，日后安排（2023/07/23早）"></a>这个目前还没做好，日后安排（2023/07/23早）</h5></li>
</ul>
<h3 id="用户信息页"><a href="#用户信息页" class="headerlink" title="用户信息页"></a>用户信息页</h3><ul>
<li><h5 id="添加页面很简单，新增路由，在指定路径下新增对应页面即可"><a href="#添加页面很简单，新增路由，在指定路径下新增对应页面即可" class="headerlink" title="添加页面很简单，新增路由，在指定路径下新增对应页面即可"></a>添加页面很简单，新增路由，在指定路径下新增对应页面即可</h5></li>
<li><h5 id="在-config-routes-ts-下新增-User-路由"><a href="#在-config-routes-ts-下新增-User-路由" class="headerlink" title="在 config/routes.ts 下新增 User 路由"></a>在 config/routes.ts 下新增 User 路由</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-comment">//用户信息页</span><br> &#123;<br>   <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;用户信息&#x27;</span>,<br>   <span class="hljs-attr">access</span>: <span class="hljs-string">&#x27;canAdmin&#x27;</span>,<br>   <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;user&#x27;</span>,<br>   <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/user/list&#x27;</span>,<br>   <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./TableList/User&#x27;</span>,<br> &#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里，我把该页面查看权限设置为：管理员可查看"><a href="#这里，我把该页面查看权限设置为：管理员可查看" class="headerlink" title="这里，我把该页面查看权限设置为：管理员可查看"></a>这里，我把该页面查看权限设置为：管理员可查看</h5></li>
<li><h5 id="在-pages-TableList-下新增-User-页面"><a href="#在-pages-TableList-下新增-User-页面" class="headerlink" title="在 pages/TableList 下新增 User 页面"></a>在 pages/TableList 下新增 User 页面</h5></li>
<li><h5 id="这里展示下请求发送逻辑和信息展示表格："><a href="#这里展示下请求发送逻辑和信息展示表格：" class="headerlink" title="这里展示下请求发送逻辑和信息展示表格："></a>这里展示下请求发送逻辑和信息展示表格：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-attr">columns</span>: <span class="hljs-title class_">ProColumns</span>&lt;<span class="hljs-variable constant_">API</span>.<span class="hljs-property">User</span>&gt;[] = [<br>   &#123;<br>     <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;id&#x27;</span>,<br>     <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;id&#x27;</span>,<br>     <span class="hljs-attr">copyable</span>: <span class="hljs-literal">true</span>,<br>     <span class="hljs-attr">ellipsis</span>: <span class="hljs-literal">true</span>,<br>     <span class="hljs-attr">tip</span>: <span class="hljs-string">&#x27;用户id是唯一的&#x27;</span>,<br>   &#125;,<br><br>   &#123;<br>     <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;账户&#x27;</span>,<br>     <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;userAccount&#x27;</span>,<br>     <span class="hljs-attr">valueType</span>: <span class="hljs-string">&#x27;textarea&#x27;</span>,<br>   &#125;,<br><br>   &#123;<br>     <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;昵称&#x27;</span>,<br>     <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;userName&#x27;</span>,<br>     <span class="hljs-attr">valueType</span>: <span class="hljs-string">&#x27;textarea&#x27;</span>,<br>   &#125;,<br><br>   &#123;<br>     <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;头像&#x27;</span>,<br>     <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;userAvater&#x27;</span>,<br>     <span class="hljs-attr">valueType</span>: <span class="hljs-string">&#x27;textarea&#x27;</span>,<br>     <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">_, record</span>) =&gt;</span> &#123;<br>       <span class="hljs-keyword">const</span> url = record.<span class="hljs-property">userAvatar</span>;<br><br>       <span class="hljs-keyword">return</span> (<br>         <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Space</span>&gt;</span></span><br><span class="language-xml">           <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#123;url&#125;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;img&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&#123;&#123;</span> <span class="hljs-attr">width:</span> &#x27;<span class="hljs-attr">30px</span>&#x27;, <span class="hljs-attr">height:</span> &#x27;<span class="hljs-attr">30px</span>&#x27; &#125;&#125; /&gt;</span></span><br><span class="language-xml">         <span class="hljs-tag">&lt;/<span class="hljs-name">Space</span>&gt;</span></span><br>       );<br>     &#125;,<br>   &#125;,<br><br>   &#123;<br>     <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;微信开放平台id&#x27;</span>,<br>     <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;unionId&#x27;</span>,<br>     <span class="hljs-attr">copyable</span>: <span class="hljs-literal">true</span>,<br>     <span class="hljs-attr">ellipsis</span>: <span class="hljs-literal">true</span>,<br>   &#125;,<br><br>   &#123;<br>     <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;公众号id&#x27;</span>,<br>     <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;mpOpenId&#x27;</span>,<br>     <span class="hljs-attr">copyable</span>: <span class="hljs-literal">true</span>,<br>     <span class="hljs-attr">ellipsis</span>: <span class="hljs-literal">true</span>,<br>   &#125;,<br><br>   &#123;<br>     <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;角色&#x27;</span>,<br>     <span class="hljs-attr">disable</span>: <span class="hljs-literal">true</span>,<br>     <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;userRole&#x27;</span>,<br>     <span class="hljs-attr">valueType</span>: <span class="hljs-string">&#x27;select&#x27;</span>,<br>     <span class="hljs-attr">filters</span>: <span class="hljs-literal">true</span>,<br>     <span class="hljs-attr">onFilter</span>: <span class="hljs-literal">true</span>,<br><br>     <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">_, record</span>) =&gt;</span> &#123;<br>       <span class="hljs-keyword">let</span> tagColor = <span class="hljs-string">&#x27;grey&#x27;</span>;<br>       <span class="hljs-keyword">let</span> userRole = <span class="hljs-string">&#x27;&#x27;</span>;<br><br>       <span class="hljs-keyword">switch</span> (record?.<span class="hljs-property">userRole</span>) &#123;<br>         <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;admin&#x27;</span>:<br>           tagColor = <span class="hljs-string">&#x27;green&#x27;</span>;<br>           userRole = <span class="hljs-string">&#x27;管理员&#x27;</span>;<br>           <span class="hljs-keyword">break</span>;<br>         <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;user&#x27;</span>:<br>           tagColor = <span class="hljs-string">&#x27;blue&#x27;</span>;<br>           userRole = <span class="hljs-string">&#x27;普通用户&#x27;</span>;<br>           <span class="hljs-keyword">break</span>;<br>         <span class="hljs-attr">default</span>:<br>           tagColor = <span class="hljs-string">&#x27;default&#x27;</span>;<br>       &#125;<br><br>       <span class="hljs-keyword">return</span> (<br>         <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Space</span>&gt;</span></span><br><span class="language-xml">           <span class="hljs-tag">&lt;<span class="hljs-name">Tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&#123;tagColor&#125;</span> <span class="hljs-attr">key</span>=<span class="hljs-string">&#123;record?.userRole&#125;</span>&gt;</span></span><br><span class="language-xml">             &#123;userRole&#125;</span><br><span class="language-xml">           <span class="hljs-tag">&lt;/<span class="hljs-name">Tag</span>&gt;</span></span><br><span class="language-xml">         <span class="hljs-tag">&lt;/<span class="hljs-name">Space</span>&gt;</span></span><br>       );<br>     &#125;,<br>   &#125;,<br><br>   &#123;<br>     <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;介绍&#x27;</span>,<br>     <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;userProfile&#x27;</span>,<br>     <span class="hljs-attr">ellipsis</span>: <span class="hljs-literal">true</span>,<br>   &#125;,<br><br>   &#123;<br>     <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;注册时间&#x27;</span>,<br>     <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;createTime&#x27;</span>,<br>     <span class="hljs-attr">ellipsis</span>: <span class="hljs-literal">true</span>,<br>   &#125;,<br><br>   &#123;<br>     <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;状态&#x27;</span>,<br>     <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;isDelete&#x27;</span>,<br>     <span class="hljs-attr">valueEnum</span>: &#123;<br>       <span class="hljs-number">0</span>: &#123;<br>         <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;正常&#x27;</span>,<br>         <span class="hljs-attr">status</span>: <span class="hljs-string">&#x27;success&#x27;</span>,<br>       &#125;,<br>       <span class="hljs-attr">user</span>: &#123;<br>         <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;异常&#x27;</span>,<br>         <span class="hljs-attr">status</span>: <span class="hljs-string">&#x27;error&#x27;</span>,<br>       &#125;,<br>     &#125;,<br>   &#125;,<br><br>   &#123;<br>     <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;操作&#x27;</span>,<br>     <span class="hljs-attr">valueType</span>: <span class="hljs-string">&#x27;option&#x27;</span>,<br>     <span class="hljs-attr">key</span>: <span class="hljs-string">&#x27;option&#x27;</span>,<br>     <span class="hljs-attr">render</span>: <span class="hljs-function">() =&gt;</span> [<br>       <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">key</span>=<span class="hljs-string">&quot;update&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">onClick</span>=<span class="hljs-string">&#123;()</span> =&gt;</span> &#123;</span><br><span class="language-xml">           // action?.startEditable?.(record.id);</span><br><span class="language-xml">         &#125;&#125;</span><br><span class="language-xml">       &gt;</span><br><span class="language-xml">         更新</span><br><span class="language-xml">       <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></span>,<br><br>       <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">key</span>=<span class="hljs-string">&quot;delete&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">onClick</span>=<span class="hljs-string">&#123;()</span> =&gt;</span> &#123;</span><br><span class="language-xml">           // action?.startEditable?.(record.id);</span><br><span class="language-xml">         &#125;&#125;</span><br><span class="language-xml">       &gt;</span><br><span class="language-xml">         删除</span><br><span class="language-xml">       <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></span>,<br>     ],<br>   &#125;,<br> ];<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs tsx">request=&#123;<span class="hljs-keyword">async</span> (<span class="hljs-attr">params</span>: &#123; pageSize?: <span class="hljs-built_in">number</span>; current?: <span class="hljs-built_in">number</span>; keyword?: <span class="hljs-built_in">string</span> &#125;) =&gt; &#123;<br>         <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-title function_">listUserByPageUsingPOST</span>(&#123;<br>           ...params,<br>         &#125;);<br><br>         <span class="hljs-keyword">if</span> (res?.<span class="hljs-property">data</span>) &#123;<br>           <span class="hljs-keyword">return</span> &#123;<br>             <span class="hljs-attr">data</span>: res?.<span class="hljs-property">data</span>.<span class="hljs-property">records</span> || [],<br>             <span class="hljs-attr">success</span>: <span class="hljs-literal">true</span>,<br>             <span class="hljs-attr">total</span>: res?.<span class="hljs-property">data</span>.<span class="hljs-property">total</span>,<br>           &#125;;<br>         &#125;<br>       &#125;&#125;<br></code></pre></td></tr></table></figure>

<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230723143312368.png" alt="image-20230723143312368"></p>
<h3 id="接口信息页"><a href="#接口信息页" class="headerlink" title="接口信息页"></a>接口信息页</h3><ul>
<li><h5 id="在-config-routes-ts-下新增-InterfaceInfo-路由"><a href="#在-config-routes-ts-下新增-InterfaceInfo-路由" class="headerlink" title="在 config/routes.ts 下新增 InterfaceInfo 路由"></a>在 config/routes.ts 下新增 InterfaceInfo 路由</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-comment">//接口信息页</span><br>  &#123;<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;接口信息&#x27;</span>,<br>    <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;user&#x27;</span>,<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/interfaceInfo/list&#x27;</span>,<br>    <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./TableList/InterfaceInfo&#x27;</span>,<br>  &#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在-pages-TableList-下新增-User-页面-1"><a href="#在-pages-TableList-下新增-User-页面-1" class="headerlink" title="在 pages/TableList 下新增 User 页面"></a>在 pages/TableList 下新增 User 页面</h5></li>
<li><h5 id="这里展示下请求发送逻辑和信息展示表格：-1"><a href="#这里展示下请求发送逻辑和信息展示表格：-1" class="headerlink" title="这里展示下请求发送逻辑和信息展示表格："></a>这里展示下请求发送逻辑和信息展示表格：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-attr">columns</span>: <span class="hljs-title class_">ProColumns</span>&lt;<span class="hljs-variable constant_">API</span>.<span class="hljs-property">InterfaceInfoQueryRequest</span>&gt;[] = [<br>  &#123;<br>    <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;id&#x27;</span>,<br>    <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;id&#x27;</span>,<br>    <span class="hljs-attr">copyable</span>: <span class="hljs-literal">true</span>,<br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;接口名称&#x27;</span>,<br>    <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>    <span class="hljs-attr">copyable</span>: <span class="hljs-literal">true</span>,<br>    <span class="hljs-attr">ellipsis</span>: <span class="hljs-literal">true</span>,<br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;接口描述&#x27;</span>,<br>    <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;description&#x27;</span>,<br>    <span class="hljs-attr">ellipsis</span>: <span class="hljs-literal">true</span>,<br>    <span class="hljs-attr">valueType</span>: <span class="hljs-string">&#x27;select&#x27;</span>,<br>  &#125;,<br><br>  &#123;<br>    <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;接口状态&#x27;</span>,<br>    <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;status&#x27;</span>,<br>    <span class="hljs-attr">filters</span>: <span class="hljs-literal">true</span>,<br>    <span class="hljs-attr">onFilter</span>: <span class="hljs-literal">true</span>,<br>    <span class="hljs-attr">valueEnum</span>: &#123;<br>      <span class="hljs-number">0</span>: &#123;<br>        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;开放&#x27;</span>,<br>        <span class="hljs-attr">status</span>: <span class="hljs-string">&#x27;success&#x27;</span>,<br>      &#125;,<br>      <span class="hljs-number">1</span>: &#123;<br>        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;异常&#x27;</span>,<br>        <span class="hljs-attr">status</span>: <span class="hljs-string">&#x27;error&#x27;</span>,<br>        <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span>,<br>      &#125;,<br>      <span class="hljs-number">2</span>: &#123;<br>        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;解决中&#x27;</span>,<br>        <span class="hljs-attr">status</span>: <span class="hljs-string">&#x27;Processing&#x27;</span>,<br>      &#125;,<br>    &#125;,<br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;接口方法&#x27;</span>,<br>    <span class="hljs-attr">disable</span>: <span class="hljs-literal">true</span>,<br>    <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;method&#x27;</span>,<br>    <span class="hljs-attr">valueType</span>: <span class="hljs-string">&#x27;select&#x27;</span>,<br>    <span class="hljs-attr">filters</span>: <span class="hljs-literal">true</span>,<br>    <span class="hljs-attr">onFilter</span>: <span class="hljs-literal">true</span>,<br><br>    <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">_, record</span>) =&gt;</span> (<br>      <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Space</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">Tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&#123;</span>&#x27;<span class="hljs-attr">green</span>&#x27;&#125; <span class="hljs-attr">key</span>=<span class="hljs-string">&#123;record?.method&#125;</span>&gt;</span></span><br><span class="language-xml">          &#123;record?.method&#125;</span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">Tag</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">Space</span>&gt;</span></span><br>    ),<br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;创建人&#x27;</span>,<br>    <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;userId&#x27;</span>,<br>    <span class="hljs-attr">copyable</span>: <span class="hljs-literal">true</span>,<br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;创建时间&#x27;</span>,<br>    <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;createTime&#x27;</span>,<br>    <span class="hljs-attr">valueType</span>: <span class="hljs-string">&#x27;date&#x27;</span>,<br>    <span class="hljs-attr">hideInSearch</span>: <span class="hljs-literal">true</span>,<br>  &#125;,<br><br>  &#123;<br>    <span class="hljs-attr">title</span>: <span class="hljs-string">&#x27;操作&#x27;</span>,<br>    <span class="hljs-attr">valueType</span>: <span class="hljs-string">&#x27;option&#x27;</span>,<br>    <span class="hljs-attr">key</span>: <span class="hljs-string">&#x27;option&#x27;</span>,<br>    <span class="hljs-attr">render</span>: <span class="hljs-function">() =&gt;</span> [<br>      <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span></span></span><br><span class="hljs-tag"><span class="language-xml">        <span class="hljs-attr">key</span>=<span class="hljs-string">&quot;editable&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">        <span class="hljs-attr">onClick</span>=<span class="hljs-string">&#123;()</span> =&gt;</span> &#123;</span><br><span class="language-xml">          // action?.startEditable?.(record.id);</span><br><span class="language-xml">        &#125;&#125;</span><br><span class="language-xml">      &gt;</span><br><span class="language-xml">        更新</span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></span>,<br>      <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">target</span>=<span class="hljs-string">&quot;_blank&quot;</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;noopener noreferrer&quot;</span> <span class="hljs-attr">key</span>=<span class="hljs-string">&quot;view&quot;</span>&gt;</span></span><br><span class="language-xml">        删除</span><br><span class="language-xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></span>,<br>    ],<br>  &#125;,<br>];<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里使用了高级表格组件"><a href="#这里使用了高级表格组件" class="headerlink" title="这里使用了高级表格组件"></a>这里使用了高级表格组件</h5></li>
<li><h5 id="优化了表格展现效果：可复制、省略、可过滤等等（2023-07-23午）"><a href="#优化了表格展现效果：可复制、省略、可过滤等等（2023-07-23午）" class="headerlink" title="优化了表格展现效果：可复制、省略、可过滤等等（2023/07/23午）"></a>优化了表格展现效果：可复制、省略、可过滤等等（2023/07/23午）</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230723120419634.png" alt="image-20230723120419634"></p>
<h2 id="新增接口"><a href="#新增接口" class="headerlink" title="新增接口"></a>新增接口</h2><ul>
<li><h5 id="用户信息页的这些完成批量处理的代码可以删除："><a href="#用户信息页的这些完成批量处理的代码可以删除：" class="headerlink" title="用户信息页的这些完成批量处理的代码可以删除："></a>用户信息页的这些完成批量处理的代码可以删除：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs tsx">actionRef=&#123;actionRef&#125;<br>      rowKey=<span class="hljs-string">&quot;key&quot;</span><br>      search=&#123;&#123;<br>        <span class="hljs-attr">labelWidth</span>: <span class="hljs-number">120</span>,<br>      &#125;&#125;<br>      toolBarRender=&#123;<span class="hljs-function">() =&gt;</span> [<br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Button</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">key</span>=<span class="hljs-string">&quot;primary&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">onClick</span>=<span class="hljs-string">&#123;()</span> =&gt;</span> &#123;</span><br><span class="language-xml">            handleModalOpen(true);</span><br><span class="language-xml">          &#125;&#125;</span><br><span class="language-xml">        &gt;</span><br><span class="language-xml">          <span class="hljs-tag">&lt;<span class="hljs-name">PlusOutlined</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">FormattedMessage</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;pages.searchTable.new&quot;</span> <span class="hljs-attr">defaultMessage</span>=<span class="hljs-string">&quot;New&quot;</span> /&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span></span>,<br>      ]&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&#123;<span class="hljs-comment">/* 选中记录 批量处理记录*/</span>&#125;<br>     &#123;selectedRowsState?.<span class="hljs-property">length</span> &gt; <span class="hljs-number">0</span> &amp;&amp; (<br>       <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">FooterToolbar</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">extra</span>=<span class="hljs-string">&#123;</span></span></span><br><span class="hljs-tag"><span class="language-xml">           &lt;<span class="hljs-attr">div</span>&gt;</span></span><br><span class="language-xml">             <span class="hljs-tag">&lt;<span class="hljs-name">FormattedMessage</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;pages.searchTable.chosen&quot;</span> <span class="hljs-attr">defaultMessage</span>=<span class="hljs-string">&quot;Chosen&quot;</span> /&gt;</span>&#123;&#x27; &#x27;&#125;</span><br><span class="language-xml">             <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&#123;&#123;</span> <span class="hljs-attr">fontWeight:</span> <span class="hljs-attr">600</span> &#125;&#125;&gt;</span>&#123;selectedRowsState.length&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>&#123;&#x27; &#x27;&#125;</span><br><span class="language-xml">             <span class="hljs-tag">&lt;<span class="hljs-name">FormattedMessage</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;pages.searchTable.createForm.newRule&quot;</span> <span class="hljs-attr">defaultMessage</span>=<span class="hljs-string">&quot;项&quot;</span> /&gt;</span></span><br><span class="language-xml">             <span class="hljs-symbol">&amp;nbsp;</span><span class="hljs-symbol">&amp;nbsp;</span></span><br><span class="language-xml">             <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span></span><br><span class="language-xml">               <span class="hljs-tag">&lt;<span class="hljs-name">FormattedMessage</span></span></span><br><span class="hljs-tag"><span class="language-xml">                 <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;pages.searchTable.totalServiceCalls&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">                 <span class="hljs-attr">defaultMessage</span>=<span class="hljs-string">&quot;Total number of service calls&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">               /&gt;</span>&#123;&#x27; &#x27;&#125;</span><br><span class="language-xml">               &#123;selectedRowsState.reduce((pre, item) =&gt; pre + item.callNo!, 0)&#125;&#123;&#x27; &#x27;&#125;</span><br><span class="language-xml">               <span class="hljs-tag">&lt;<span class="hljs-name">FormattedMessage</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;pages.searchTable.tenThousand&quot;</span> <span class="hljs-attr">defaultMessage</span>=<span class="hljs-string">&quot;万&quot;</span> /&gt;</span></span><br><span class="language-xml">             <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><br><span class="language-xml">           <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">         &#125;</span><br><span class="language-xml">       &gt;</span><br><span class="language-xml">         &#123;/* 批量删除 */&#125;</span><br><span class="language-xml">         <span class="hljs-tag">&lt;<span class="hljs-name">Button</span></span></span><br><span class="hljs-tag"><span class="language-xml">           <span class="hljs-attr">onClick</span>=<span class="hljs-string">&#123;async</span> () =&gt;</span> &#123;</span><br><span class="language-xml">             await handleRemove(selectedRowsState);</span><br><span class="language-xml">             setSelectedRows([]);</span><br><span class="language-xml">             actionRef.current?.reloadAndRest?.();</span><br><span class="language-xml">           &#125;&#125;</span><br><span class="language-xml">         &gt;</span><br><span class="language-xml">           <span class="hljs-tag">&lt;<span class="hljs-name">FormattedMessage</span></span></span><br><span class="hljs-tag"><span class="language-xml">             <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;pages.searchTable.batchDeletion&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">             <span class="hljs-attr">defaultMessage</span>=<span class="hljs-string">&quot;Batch deletion&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">           /&gt;</span></span><br><span class="language-xml">         <span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span></span><br><span class="language-xml">         &#123;/* 批量审批 */&#125;</span><br><span class="language-xml">         <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span></span><br><span class="language-xml">           <span class="hljs-tag">&lt;<span class="hljs-name">FormattedMessage</span></span></span><br><span class="hljs-tag"><span class="language-xml">             <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;pages.searchTable.batchApproval&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">             <span class="hljs-attr">defaultMessage</span>=<span class="hljs-string">&quot;Batch approval&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">           /&gt;</span></span><br><span class="language-xml">         <span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span></span><br><span class="language-xml">       <span class="hljs-tag">&lt;/<span class="hljs-name">FooterToolbar</span>&gt;</span></span><br>     )&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="优化了用户信息页表格的展现方式，解决了登录用户头像获取不成功的问题："><a href="#优化了用户信息页表格的展现方式，解决了登录用户头像获取不成功的问题：" class="headerlink" title="优化了用户信息页表格的展现方式，解决了登录用户头像获取不成功的问题："></a>优化了用户信息页表格的展现方式，解决了登录用户头像获取不成功的问题：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230726180123695.png" alt="image-20230726180123695"></p>
<ul>
<li><h5 id="做了一下午，仅仅完成了接口信息的新增功能（—-—）（2023-07-26）"><a href="#做了一下午，仅仅完成了接口信息的新增功能（—-—）（2023-07-26）" class="headerlink" title="做了一下午，仅仅完成了接口信息的新增功能（—_—）（2023/07/26）"></a>做了一下午，仅仅完成了接口信息的新增功能（—_—）（2023/07/26）</h5></li>
<li><h5 id="本来一切都很顺利，但是在设计新增接口表单时，我犯难了：简单来讲，有两种表单的写法，均可实现新增接口功能"><a href="#本来一切都很顺利，但是在设计新增接口表单时，我犯难了：简单来讲，有两种表单的写法，均可实现新增接口功能" class="headerlink" title="本来一切都很顺利，但是在设计新增接口表单时，我犯难了：简单来讲，有两种表单的写法，均可实现新增接口功能"></a>本来一切都很顺利，但是在设计新增接口表单时，我犯难了：简单来讲，有两种表单的写法，均可实现新增接口功能</h5></li>
<li><h5 id="在-TableList-InterfaceInfo-下新增-CreateForm-tsx文件："><a href="#在-TableList-InterfaceInfo-下新增-CreateForm-tsx文件：" class="headerlink" title="在 TableList/InterfaceInfo 下新增 CreateForm.tsx文件："></a>在 TableList/InterfaceInfo 下新增 CreateForm.tsx文件：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">export</span> <span class="hljs-keyword">type</span> <span class="hljs-title class_">Props</span> = &#123;<br>  <span class="hljs-attr">columns</span>: <span class="hljs-title class_">ProColumns</span>&lt;<span class="hljs-variable constant_">API</span>.<span class="hljs-property">InterfaceInfo</span>&gt;[];<br>  <span class="hljs-attr">onCancel</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;<br>  <span class="hljs-attr">onSubmit</span>: <span class="hljs-function">(<span class="hljs-params">values: API.InterfaceInfo</span>) =&gt;</span> <span class="hljs-title class_">Promise</span>&lt;<span class="hljs-built_in">void</span>&gt;;<br>  <span class="hljs-attr">visible</span>: <span class="hljs-built_in">boolean</span>;<br>&#125;;<br><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">CreateModal</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span>&lt;<span class="hljs-title class_">Props</span>&gt; = <span class="hljs-function">(<span class="hljs-params">props</span>) =&gt;</span> &#123;<br>  <span class="hljs-keyword">const</span> &#123; visible, columns, onCancel, onSubmit &#125; = props;<br><br>  <span class="hljs-keyword">return</span> (<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Modal</span> <span class="hljs-attr">visible</span>=<span class="hljs-string">&#123;visible&#125;</span> <span class="hljs-attr">footer</span>=<span class="hljs-string">&#123;null&#125;</span> <span class="hljs-attr">onCancel</span>=<span class="hljs-string">&#123;()</span> =&gt;</span> onCancel?.()&#125; title=&quot;查询接口信息&quot;&gt;</span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">ProTable</span></span></span><br><span class="hljs-tag"><span class="language-xml">        // <span class="hljs-attr">设置表单的标题</span></span></span><br><span class="hljs-tag"><span class="language-xml">        <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;form&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">        <span class="hljs-attr">columns</span>=<span class="hljs-string">&#123;columns&#125;</span></span></span><br><span class="hljs-tag"><span class="language-xml">        <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">&#123;(value)</span> =&gt;</span> &#123;</span><br><span class="language-xml">          onSubmit?.(value);</span><br><span class="language-xml">        &#125;&#125;</span><br><span class="language-xml">        onReset=&#123;() =&gt; &#123;</span><br><span class="language-xml">          console.log(&#x27;表单已重置&#x27;); // 表单重置的回调函数</span><br><span class="language-xml">        &#125;&#125;</span><br><span class="language-xml">      /&gt;</span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">Modal</span>&gt;</span></span><br>  );<br>&#125;;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">CreateModal</span>;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="然后在-index-tsx-下-引入上面导出的表单"><a href="#然后在-index-tsx-下-引入上面导出的表单" class="headerlink" title="然后在 index.tsx 下 引入上面导出的表单:"></a>然后在 index.tsx 下 引入上面导出的表单:</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&#123;<span class="hljs-comment">/* 新增记录表单 */</span>&#125;<br>     &lt;<span class="hljs-title class_">CreateModal</span><br>      columns=&#123;columns&#125;<br>      onCancel=&#123;<span class="hljs-function">() =&gt;</span> &#123;<br>        <span class="hljs-title function_">handleModalVisible</span>(<span class="hljs-literal">false</span>);<br>      &#125;&#125;<br>      onSubmit=&#123;<span class="hljs-function">(<span class="hljs-params">values</span>) =&gt;</span> &#123;<br>        <span class="hljs-title function_">handleModalVisible</span>(<span class="hljs-literal">false</span>);<br>        <span class="hljs-title function_">addInterfaceInfoUsingPOST</span>(values);<br>      &#125;&#125;<br>      visible=&#123;createModalVisible&#125;<br>    /&gt; <br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这个很方便，自动识别字段，并填充表单，但对于各个字段的校验和单独处理，不是很方便（目前我这么认为）"><a href="#这个很方便，自动识别字段，并填充表单，但对于各个字段的校验和单独处理，不是很方便（目前我这么认为）" class="headerlink" title="这个很方便，自动识别字段，并填充表单，但对于各个字段的校验和单独处理，不是很方便（目前我这么认为）"></a>这个很方便，自动识别字段，并填充表单，但对于各个字段的校验和单独处理，不是很方便（目前我这么认为）</h5></li>
<li><h5 id="所以我选择第二种方法，所有表单的校验都手动处理，简单粗暴，更适合我这种偏后端的程序员，设计表单更好理解："><a href="#所以我选择第二种方法，所有表单的校验都手动处理，简单粗暴，更适合我这种偏后端的程序员，设计表单更好理解：" class="headerlink" title="所以我选择第二种方法，所有表单的校验都手动处理，简单粗暴，更适合我这种偏后端的程序员，设计表单更好理解："></a>所以我选择第二种方法，所有表单的校验都手动处理，简单粗暴，更适合我这种偏后端的程序员，设计表单更好理解：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&lt;<span class="hljs-title class_">ModalForm</span><br>       title=<span class="hljs-string">&quot;新增接口表单&quot;</span><br>       width=<span class="hljs-string">&quot;600px&quot;</span><br>       open=&#123;createModalOpen&#125;<br>       onOpenChange=&#123;handleModalOpen&#125;<br>       onFinish=&#123;<span class="hljs-keyword">async</span> (value) =&gt; &#123;<br>         <span class="hljs-keyword">const</span> success = <span class="hljs-keyword">await</span> <span class="hljs-title function_">addInterfaceInfoUsingPOST</span>(value <span class="hljs-keyword">as</span> <span class="hljs-variable constant_">API</span>.<span class="hljs-property">InterfaceInfo</span>);<br>         <span class="hljs-keyword">if</span> (success) &#123;<br>           message.<span class="hljs-title function_">success</span>(<span class="hljs-string">&#x27;新增接口成功&#x27;</span>);<br>           <span class="hljs-title function_">handleModalOpen</span>(<span class="hljs-literal">false</span>);<br>           <span class="hljs-keyword">if</span> (actionRef.<span class="hljs-property">current</span>) &#123;<br>             actionRef.<span class="hljs-property">current</span>.<span class="hljs-title function_">reload</span>();<br>           &#125;<br>         &#125;<br>       &#125;&#125;<br>     &gt;<br>       <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormText</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;name&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;接口名称&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入接口名称&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">接口名称不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">       /&gt;</span></span><br>       <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormTextArea</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;description&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;接口描述&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入接口描述&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">接口描述不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">       /&gt;</span></span><br>       <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormText</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;url&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;接口地址&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入接口地址&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">账户不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">       /&gt;</span></span><br>       <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormText</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;requestHeader&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;请求头&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入请求头&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">请求头不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">       /&gt;</span></span><br>       <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormText</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;responseHeader&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;响应头&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入请求头&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">响应头不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">       /&gt;</span></span><br>       <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormText</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;userTd&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;创建人&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入创建人&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">创建人不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">       /&gt;</span></span><br>       <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormRadio.Group</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;method&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;请求类型&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请选择请求类型&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">options</span>=<span class="hljs-string">&#123;[</span>&#x27;<span class="hljs-attr">GET</span>&#x27;, &#x27;<span class="hljs-attr">POST</span>&#x27;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">         <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">请求类型不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">       /&gt;</span></span><br>     &lt;/<span class="hljs-title class_">ModalForm</span>&gt;<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230727130821670.png" alt="image-20230727130821670"></p>
<ul>
<li><h5 id="对于用户信息的增删改，我觉得不是很现实，哪有管理员直接在后台改人家信息的，我就不做了"><a href="#对于用户信息的增删改，我觉得不是很现实，哪有管理员直接在后台改人家信息的，我就不做了" class="headerlink" title="对于用户信息的增删改，我觉得不是很现实，哪有管理员直接在后台改人家信息的，我就不做了"></a>对于用户信息的增删改，我觉得不是很现实，哪有管理员直接在后台改人家信息的，我就不做了</h5></li>
<li><h5 id="另外，鱼聪明真是我的得力干将，有不懂的代码直接问它就完事了"><a href="#另外，鱼聪明真是我的得力干将，有不懂的代码直接问它就完事了" class="headerlink" title="另外，鱼聪明真是我的得力干将，有不懂的代码直接问它就完事了"></a>另外，鱼聪明真是我的得力干将，有不懂的代码直接问它就完事了</h5></li>
<li><h5 id="晚上继续快速开发剩下的修改和删除接口功能，再做后端调用接口的开发"><a href="#晚上继续快速开发剩下的修改和删除接口功能，再做后端调用接口的开发" class="headerlink" title="晚上继续快速开发剩下的修改和删除接口功能，再做后端调用接口的开发"></a>晚上继续快速开发剩下的修改和删除接口功能，再做后端调用接口的开发</h5></li>
</ul>
<h2 id="更新接口"><a href="#更新接口" class="headerlink" title="更新接口"></a>更新接口</h2><ul>
<li><h5 id="这个功能很好做，想明白思路即可：获取本行信息，回显在更新接口表单中，更新完成后执行提交"><a href="#这个功能很好做，想明白思路即可：获取本行信息，回显在更新接口表单中，更新完成后执行提交" class="headerlink" title="这个功能很好做，想明白思路即可：获取本行信息，回显在更新接口表单中，更新完成后执行提交"></a>这个功能很好做，想明白思路即可：获取本行信息，回显在更新接口表单中，更新完成后执行提交</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-comment">/** getInterfaceInfoById GET /api/interfaceInfo/get */</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">getInterfaceInfoByIdUsingGET</span>(<span class="hljs-params"></span><br><span class="hljs-params">  <span class="hljs-comment">// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)</span></span><br><span class="hljs-params">  id: <span class="hljs-built_in">number</span>,</span><br><span class="hljs-params">  options?: &#123; [key: <span class="hljs-built_in">string</span>]: <span class="hljs-built_in">any</span> &#125;,</span><br><span class="hljs-params"></span>) &#123;<br>  <span class="hljs-keyword">return</span> request&lt;<span class="hljs-variable constant_">API</span>.<span class="hljs-property">BaseResponseInterfaceInfo_</span>&gt;(<span class="hljs-string">&#x27;/api/interfaceInfo/get&#x27;</span>, &#123;<br>    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;GET&#x27;</span>,<br>    <span class="hljs-attr">params</span>: &#123;<br>      id,<br>    &#125;,<br>    ...(options || &#123;&#125;),<br>  &#125;);<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&lt;a<br>  key=<span class="hljs-string">&quot;editable&quot;</span><br>	onClick=&#123;<span class="hljs-keyword">async</span> () =&gt; &#123;<br>	 <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-title function_">getInterfaceInfoByIdUsingGET</span>(<span class="hljs-title class_">Number</span>(record.<span class="hljs-property">id</span>));<br>	   <span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span>) &#123;<br>	   <span class="hljs-title function_">setInterfaceInfo</span>(res.<span class="hljs-property">data</span>);<br>	 &#125;<br>	   <span class="hljs-title function_">handleUpdateModalOpen</span>(<span class="hljs-literal">true</span>);<br>   &#125;&#125; <br>&gt;<br>更新<br>&lt;/a&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">const</span> [createUpdateModalOpen, handleUpdateModalOpen] = useState&lt;<span class="hljs-built_in">boolean</span>&gt;(<span class="hljs-literal">false</span>);<br><br><span class="hljs-keyword">const</span> [interfaceInfo, setInterfaceInfo] = useState&lt;<span class="hljs-variable constant_">API</span>.<span class="hljs-property">InterfaceInfo</span> | <span class="hljs-literal">null</span>&gt;(<span class="hljs-literal">null</span>);<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&lt;<span class="hljs-title class_">ModalForm</span><br>        name=<span class="hljs-string">&quot;updateInterfaceInfo&quot;</span><br>        title=<span class="hljs-string">&quot;更新接口表单&quot;</span><br>        width=<span class="hljs-string">&quot;600px&quot;</span><br>        open=&#123;createUpdateModalOpen&#125;<br>        onOpenChange=&#123;handleUpdateModalOpen&#125;<br>        onFinish=&#123;<span class="hljs-keyword">async</span> (value) =&gt; &#123;<br>          <span class="hljs-keyword">const</span> additionalData = &#123;<br>            <span class="hljs-comment">// 添加额外的数据</span><br>            <span class="hljs-attr">id</span>: interfaceInfo?.<span class="hljs-property">id</span>,<br>          &#125;;<br><br>          <span class="hljs-keyword">const</span> formData = &#123;<br>            ...value, <span class="hljs-comment">// 表单数据</span><br>            ...additionalData, <span class="hljs-comment">// 额外的数据</span><br>          &#125;;<br>          <span class="hljs-keyword">const</span> success = <span class="hljs-keyword">await</span> <span class="hljs-title function_">updateInterfaceInfoUsingPOST</span>(formData <span class="hljs-keyword">as</span> <span class="hljs-variable constant_">API</span>.<span class="hljs-property">InterfaceInfo</span>);<br>          <span class="hljs-keyword">if</span> (success) &#123;<br>            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;updateInterfaceInfo表单提交&#x27;</span>);<br>            message.<span class="hljs-title function_">success</span>(<span class="hljs-string">&#x27;更新接口成功&#x27;</span>);<br><br>            <span class="hljs-title function_">handleUpdateModalOpen</span>(<span class="hljs-literal">false</span>);<br>            <span class="hljs-keyword">if</span> (actionRef.<span class="hljs-property">current</span>) &#123;<br>              actionRef.<span class="hljs-property">current</span>.<span class="hljs-title function_">reload</span>();<br>            &#125;<br>          &#125;<br>          <span class="hljs-comment">// window.location.reload(); // 刷新页面</span><br>        &#125;&#125;<br>      &gt;<br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormText</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;name&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;接口名称&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">initialValue</span>=<span class="hljs-string">&#123;interfaceInfo?.name&#125;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入接口名称&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">接口名称不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">        /&gt;</span></span><br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormTextArea</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;description&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;接口描述&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">initialValue</span>=<span class="hljs-string">&#123;interfaceInfo?.description&#125;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入接口描述&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">接口描述不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">        /&gt;</span></span><br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormText</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;url&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;接口地址&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">initialValue</span>=<span class="hljs-string">&#123;interfaceInfo?.url&#125;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入接口地址&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">账户不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">        /&gt;</span></span><br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormText</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;requestHeader&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;请求头&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">initialValue</span>=<span class="hljs-string">&#123;interfaceInfo?.requestHeader&#125;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入请求头&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">请求头不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">        /&gt;</span></span><br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormText</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;responseHeader&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;响应头&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">initialValue</span>=<span class="hljs-string">&#123;interfaceInfo?.responseHeader&#125;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入请求头&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">响应头不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">        /&gt;</span></span><br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormText</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;userTd&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;创建人&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">initialValue</span>=<span class="hljs-string">&#123;interfaceInfo?.userId&#125;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入创建人&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">required</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">创建人不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">        /&gt;</span></span><br>        <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ProFormRadio.Group</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;method&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;请求类型&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请选择请求类型&quot;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">value</span>=<span class="hljs-string">&#123;interfaceInfo?.method&#125;</span></span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">options</span>=<span class="hljs-string">&#123;[</span>&#x27;<span class="hljs-attr">GET</span>&#x27;, &#x27;<span class="hljs-attr">POST</span>&#x27;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">          <span class="hljs-attr">rules</span>=<span class="hljs-string">&#123;[&#123;</span> <span class="hljs-attr">required:</span> <span class="hljs-attr">true</span>, <span class="hljs-attr">message:</span> &#x27;<span class="hljs-attr">请求类型不能为空</span>&#x27; &#125;]&#125;</span></span><br><span class="hljs-tag"><span class="language-xml">        /&gt;</span></span><br>      &lt;/<span class="hljs-title class_">ModalForm</span>&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="短短的几行代码，埋藏了不少坑，我前端也不扎实，太难搞了："><a href="#短短的几行代码，埋藏了不少坑，我前端也不扎实，太难搞了：" class="headerlink" title="短短的几行代码，埋藏了不少坑，我前端也不扎实，太难搞了："></a>短短的几行代码，埋藏了不少坑，我前端也不扎实，太难搞了：</h5></li>
<li><h5 id="点击更新后携带id查询本行数据，那个id一直显示不是number值，record-id明明是string却用不了任何API，均报错，不知道怎么封装的"><a href="#点击更新后携带id查询本行数据，那个id一直显示不是number值，record-id明明是string却用不了任何API，均报错，不知道怎么封装的" class="headerlink" title="点击更新后携带id查询本行数据，那个id一直显示不是number值，record.id明明是string却用不了任何API，均报错，不知道怎么封装的"></a>点击更新后携带id查询本行数据，那个id一直显示不是number值，record.id明明是string却用不了任何API，均报错，不知道怎么封装的</h5></li>
<li><h5 id="拿到本行数据后，又不会搞怎么接收返回值了，发现使用useState可以解决这个问题："><a href="#拿到本行数据后，又不会搞怎么接收返回值了，发现使用useState可以解决这个问题：" class="headerlink" title="拿到本行数据后，又不会搞怎么接收返回值了，发现使用useState可以解决这个问题："></a>拿到本行数据后，又不会搞怎么接收返回值了，发现使用useState可以解决这个问题：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">const</span> [interfaceInfo, setInterfaceInfo] = useState&lt;<span class="hljs-variable constant_">API</span>.<span class="hljs-property">InterfaceInfo</span> | <span class="hljs-literal">null</span>&gt;(<span class="hljs-literal">null</span>);<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-title function_">getInterfaceInfoByIdUsingGET</span>(<span class="hljs-title class_">Number</span>(record.<span class="hljs-property">id</span>));<br>          <span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span>) &#123;<br>              <span class="hljs-title function_">setInterfaceInfo</span>(res.<span class="hljs-property">data</span>);<br>       &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="使用-setInterfaceInfo-设置-Interface的值后，竟然可以直接在表单里用了："><a href="#使用-setInterfaceInfo-设置-Interface的值后，竟然可以直接在表单里用了：" class="headerlink" title="使用 setInterfaceInfo 设置 Interface的值后，竟然可以直接在表单里用了："></a>使用 setInterfaceInfo 设置 Interface的值后，竟然可以直接在表单里用了：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&lt;<span class="hljs-title class_">ProFormText</span><br>          name=<span class="hljs-string">&quot;name&quot;</span><br>          label=<span class="hljs-string">&quot;接口名称&quot;</span><br>          initialValue=&#123;interfaceInfo?.<span class="hljs-property">name</span>&#125;<br>          placeholder=<span class="hljs-string">&quot;请输入接口名称&quot;</span><br>          required<br>          rules=&#123;[&#123; <span class="hljs-attr">required</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">&#x27;接口名称不能为空&#x27;</span> &#125;]&#125;<br>        /&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="前端真几把神奇，啥玩意儿都给封装好了"><a href="#前端真几把神奇，啥玩意儿都给封装好了" class="headerlink" title="前端真几把神奇，啥玩意儿都给封装好了"></a>前端真几把神奇，啥玩意儿都给封装好了</h5></li>
<li><h5 id="单选框这里实现默认勾选值，挺莫名其妙的，就这么实现的："><a href="#单选框这里实现默认勾选值，挺莫名其妙的，就这么实现的：" class="headerlink" title="单选框这里实现默认勾选值，挺莫名其妙的，就这么实现的："></a>单选框这里实现默认勾选值，挺莫名其妙的，就这么实现的：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&lt;<span class="hljs-title class_">ProFormRadio</span>.<span class="hljs-property">Group</span><br>         name=<span class="hljs-string">&quot;method&quot;</span><br>         label=<span class="hljs-string">&quot;请求类型&quot;</span><br>         placeholder=<span class="hljs-string">&quot;请选择请求类型&quot;</span><br>         value=&#123;interfaceInfo?.<span class="hljs-property">method</span>&#125;<br>         options=&#123;[<span class="hljs-string">&#x27;GET&#x27;</span>, <span class="hljs-string">&#x27;POST&#x27;</span>]&#125;<br>         rules=&#123;[&#123; <span class="hljs-attr">required</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">&#x27;请求类型不能为空&#x27;</span> &#125;]&#125;<br>       /&gt;<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230727133607574.png" alt="image-20230727133607574"></p>
<h2 id="删除接口"><a href="#删除接口" class="headerlink" title="删除接口"></a>删除接口</h2><ul>
<li><h5 id="这个功能可太好做了："><a href="#这个功能可太好做了：" class="headerlink" title="这个功能可太好做了："></a>这个功能可太好做了：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-comment">/** deleteInterfaceInfo POST /api/interfaceInfo/delete */</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">deleteInterfaceInfoUsingPOST</span>(<span class="hljs-params">id: <span class="hljs-built_in">number</span>, options?: &#123; [key: <span class="hljs-built_in">string</span>]: <span class="hljs-built_in">any</span> &#125;</span>) &#123;<br>  <span class="hljs-keyword">return</span> request&lt;<span class="hljs-variable constant_">API</span>.<span class="hljs-property">BaseResponseBoolean_</span>&gt;(<span class="hljs-string">&#x27;/api/interfaceInfo/delete&#x27;</span>, &#123;<br>    <span class="hljs-attr">method</span>: <span class="hljs-string">&#x27;POST&#x27;</span>,<br>    <span class="hljs-attr">headers</span>: &#123;<br>      <span class="hljs-string">&#x27;Content-Type&#x27;</span>: <span class="hljs-string">&#x27;application/json&#x27;</span>,<br>    &#125;,<br>    <span class="hljs-attr">data</span>: &#123; id &#125;,<br>    ...(options || &#123;&#125;),<br>  &#125;);<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&lt;a<br>   onClick=&#123;<span class="hljs-keyword">async</span> () =&gt; &#123;<br>     <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-title function_">deleteInterfaceInfoUsingPOST</span>(<span class="hljs-title class_">Number</span>(record.<span class="hljs-property">id</span>));<br>         <span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span>) &#123;<br>              message.<span class="hljs-title function_">success</span>(<span class="hljs-string">&#x27;删除接口信息成功&#x27;</span>);<br>           &#125; <span class="hljs-keyword">else</span> &#123;<br>              message.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;删除接口信息失败&#x27;</span>);<br>           &#125;<br>    &#125;&#125;<br>  &gt;<br>     删除<br> &lt;/a&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="发送-POST-请求，data-一定是一个对象，像上面写的那样"><a href="#发送-POST-请求，data-一定是一个对象，像上面写的那样" class="headerlink" title="发送 POST 请求，data 一定是一个对象，像上面写的那样"></a>发送 POST 请求，data 一定是一个对象，像上面写的那样</h5></li>
<li><h5 id="没有弹窗告警，现在先不加这玩意儿了，日后优化再加，先往后做功能，增删改查写的人犯恶心（2023-07-27午）"><a href="#没有弹窗告警，现在先不加这玩意儿了，日后优化再加，先往后做功能，增删改查写的人犯恶心（2023-07-27午）" class="headerlink" title="没有弹窗告警，现在先不加这玩意儿了，日后优化再加，先往后做功能，增删改查写的人犯恶心（2023/07/27午）"></a>没有弹窗告警，现在先不加这玩意儿了，日后优化再加，先往后做功能，增删改查写的人犯恶心（2023/07/27午）</h5></li>
</ul>
<h2 id="模拟接口"><a href="#模拟接口" class="headerlink" title="模拟接口"></a>模拟接口</h2><ul>
<li><h5 id="Hutool工具类库：入门和安装-hutool-cn"><a href="#Hutool工具类库：入门和安装-hutool-cn" class="headerlink" title="Hutool工具类库：入门和安装 (hutool.cn)"></a>Hutool工具类库：<a target="_blank" rel="noopener" href="https://hutool.cn/docs/#/">入门和安装 (hutool.cn)</a></h5></li>
<li><h5 id="新建一个项目MemoryClient，用来实现后台的接口服务，注意SpringBoot与JDK版本兼容问题"><a href="#新建一个项目MemoryClient，用来实现后台的接口服务，注意SpringBoot与JDK版本兼容问题" class="headerlink" title="新建一个项目MemoryClient，用来实现后台的接口服务，注意SpringBoot与JDK版本兼容问题"></a>新建一个项目MemoryClient，用来实现后台的接口服务，注意SpringBoot与JDK版本兼容问题</h5></li>
<li><h5 id="引入Hutool工具类库，导入依赖坐标："><a href="#引入Hutool工具类库，导入依赖坐标：" class="headerlink" title="引入Hutool工具类库，导入依赖坐标："></a>引入Hutool工具类库，导入依赖坐标：</h5></li>
</ul>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs xml">   <span class="hljs-tag">&lt;<span class="hljs-name">dependency</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>cn.hutool<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>hutool-all<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">version</span>&gt;</span>5.8.18<span class="hljs-tag">&lt;/<span class="hljs-name">version</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">dependency</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">dependencies</span>&gt;</span><br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在-controller-NameController-下编写模拟接口："><a href="#在-controller-NameController-下编写模拟接口：" class="headerlink" title="在 controller/NameController 下编写模拟接口："></a>在 controller/NameController 下编写模拟接口：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@RestController</span><br><span class="hljs-meta">@RequestMapping(&quot;/name&quot;)</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">NameController</span> &#123;<br>    <span class="hljs-meta">@GetMapping(&quot;/&quot;)</span><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getNameByGet</span><span class="hljs-params">(String name)</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;GET 我的名字是: &quot;</span> + name;<br>    &#125;<br><br>    <span class="hljs-meta">@PostMapping(&quot;/&quot;)</span><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getNameByPost</span><span class="hljs-params">(String name)</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;POST 我的名字是: &quot;</span> + name;<br>    &#125;<br><br>    <span class="hljs-meta">@PostMapping(&quot;/user&quot;)</span><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getUserNameBuPost</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> User user)</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;POST 我的名字是: &quot;</span> + user.getName();<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在-client-MemoryClient-下使用Hutool工具提供的接口，发送请求："><a href="#在-client-MemoryClient-下使用Hutool工具提供的接口，发送请求：" class="headerlink" title="在 client/MemoryClient 下使用Hutool工具提供的接口，发送请求："></a>在 client/MemoryClient 下使用Hutool工具提供的接口，发送请求：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MemoryClient</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> name</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getNameByGet</span><span class="hljs-params">(String name)</span> &#123;<br>        HashMap&lt;String, Object&gt; paramMap = <span class="hljs-keyword">new</span> <span class="hljs-title class_">HashMap</span>&lt;&gt;();<br>        paramMap.put(<span class="hljs-string">&quot;name&quot;</span>, name);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">result</span> <span class="hljs-operator">=</span> HttpUtil.get(<span class="hljs-string">&quot;http://localhost:8123/api/name/&quot;</span>, paramMap);<br>        System.out.println(result);<br>        <span class="hljs-keyword">return</span> result;<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> name</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getNameByPost</span><span class="hljs-params">(String name)</span> &#123;<br>        HashMap&lt;String, Object&gt; paramMap = <span class="hljs-keyword">new</span> <span class="hljs-title class_">HashMap</span>&lt;&gt;();<br>        paramMap.put(<span class="hljs-string">&quot;name&quot;</span>, name);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">result</span> <span class="hljs-operator">=</span> HttpUtil.post(<span class="hljs-string">&quot;http://localhost:8123/api/name/&quot;</span>, paramMap);<br>        System.out.println(result);<br>        <span class="hljs-keyword">return</span> result;<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> user</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getUserByPost</span><span class="hljs-params">(User user)</span> &#123;<br>        <span class="hljs-type">String</span> <span class="hljs-variable">json</span> <span class="hljs-operator">=</span> JSONUtil.toJsonStr(user);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">result</span> <span class="hljs-operator">=</span> HttpRequest.post(<span class="hljs-string">&quot;http://localhost:8123/api/name/user&quot;</span>)<br>                .body(json)<br>                .execute().body();<br>        System.out.println(result);<br>        <span class="hljs-keyword">return</span> result;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="编写测试类，测试结果："><a href="#编写测试类，测试结果：" class="headerlink" title="编写测试类，测试结果："></a>编写测试类，测试结果：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">class</span> <span class="hljs-title class_">MemoryClientTest</span> &#123;<br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">main</span><span class="hljs-params">(String[] args)</span> &#123;<br>        <span class="hljs-type">MemoryClient</span> <span class="hljs-variable">memoryClient</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">MemoryClient</span>();<br>        memoryClient.getNameByGet(<span class="hljs-string">&quot;邓哈哈&quot;</span>);<br>        memoryClient.getNameByPost(<span class="hljs-string">&quot;邓嘻嘻&quot;</span>);<br><br>        <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>(<span class="hljs-string">&quot;邓八嘎&quot;</span>);<br>        memoryClient.getUserByPost(user);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230728234735474.png" alt="image-20230728234735474"></p>
<ul>
<li><h5 id="测试完成！使用Hutool工具包发送请求，成功调用到模拟接口（2023-07-28晚）"><a href="#测试完成！使用Hutool工具包发送请求，成功调用到模拟接口（2023-07-28晚）" class="headerlink" title="测试完成！使用Hutool工具包发送请求，成功调用到模拟接口（2023/07/28晚）"></a>测试完成！使用Hutool工具包发送请求，成功调用到模拟接口（2023/07/28晚）</h5></li>
</ul>
<h2 id="API-签名认证"><a href="#API-签名认证" class="headerlink" title="API 签名认证"></a>API 签名认证</h2><ul>
<li><h5 id="可以看这几篇掘金博文入门：（2023-07-28晚）"><a href="#可以看这几篇掘金博文入门：（2023-07-28晚）" class="headerlink" title="可以看这几篇掘金博文入门：（2023/07/28晚）"></a>可以看这几篇掘金博文入门：（2023/07/28晚）</h5></li>
<li><p><a target="_blank" rel="noopener" href="https://juejin.cn/post/7064954017327267847?searchId=202307282108386B735DD7C9C87AEB9E4B">图解|什么是重放攻击 - 掘金 (juejin.cn)</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6890798533473992717?searchId=202307282108386B735DD7C9C87AEB9E4B">API接口防止参数篡改和重放攻击 - 掘金 (juejin.cn)</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6857363801533710343?searchId=202307282104591BA346FB7964BAEE07E5">聊聊 API 签名方式 - 掘金 (juejin.cn)</a></p>
</li>
<li><h5 id="我们使用代码模拟实现一遍："><a href="#我们使用代码模拟实现一遍：" class="headerlink" title="我们使用代码模拟实现一遍："></a>我们使用代码模拟实现一遍：</h5></li>
<li><h5 id="用户携带headers（请求头）、body（请求体）向指定-url-发送请求"><a href="#用户携带headers（请求头）、body（请求体）向指定-url-发送请求" class="headerlink" title="用户携带headers（请求头）、body（请求体）向指定 url 发送请求"></a>用户携带headers（请求头）、body（请求体）向指定 url 发送请求</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">class</span> <span class="hljs-title class_">MemoryClientTest</span> &#123;<br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">main</span><span class="hljs-params">(String[] args)</span> &#123;<br>        <span class="hljs-type">String</span> <span class="hljs-variable">accessKey</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;memory&quot;</span>;<br>        <span class="hljs-type">String</span> <span class="hljs-variable">secretKey</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;12345678&quot;</span>;<br><br>        <span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">User</span>(<span class="hljs-string">&quot;邓尼玛&quot;</span>);<br>        memoryClient.getUserByPost(user);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">  * <span class="hljs-doctag">@param</span> user</span><br><span class="hljs-comment">  */</span><br> <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">getUserByPost</span><span class="hljs-params">(User user)</span> &#123;<br>     <span class="hljs-type">String</span> <span class="hljs-variable">json</span> <span class="hljs-operator">=</span> JSONUtil.toJsonStr(user);<br>     <span class="hljs-type">String</span> <span class="hljs-variable">result</span> <span class="hljs-operator">=</span> HttpRequest.post(<span class="hljs-string">&quot;http://localhost:8123/api/name/user&quot;</span>)<br>             .addHeaders(getHeaderMap(json))<br>             .body(json)<br>             .execute()<br>             .body();<br><br>     System.out.println(result);<br> &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="设置请求头（accessKey（公钥）、nonce、timestamp、sign（签名））："><a href="#设置请求头（accessKey（公钥）、nonce、timestamp、sign（签名））：" class="headerlink" title="设置请求头（accessKey（公钥）、nonce、timestamp、sign（签名））："></a>设置请求头（accessKey（公钥）、nonce、timestamp、sign（签名））：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs java"> <span class="hljs-keyword">public</span> Map&lt;String, String&gt; <span class="hljs-title function_">getHeaderMap</span><span class="hljs-params">(String body)</span> &#123;<br>        Map&lt;String, String&gt; hashMap = <span class="hljs-keyword">new</span> <span class="hljs-title class_">HashMap</span>&lt;&gt;();<br>        hashMap.put(<span class="hljs-string">&quot;accessKey&quot;</span>, accessKey);<br>        <span class="hljs-comment">// 一定不能直接发送</span><br><span class="hljs-comment">//        hashMap.put(&quot;secretKey&quot;, secretKey);</span><br>        hashMap.put(<span class="hljs-string">&quot;nonce&quot;</span>, RandomUtil.randomNumbers(<span class="hljs-number">4</span>));<br>        hashMap.put(<span class="hljs-string">&quot;body&quot;</span>, body);<br>        hashMap.put(<span class="hljs-string">&quot;timestamp&quot;</span>, String.valueOf(System.currentTimeMillis() / <span class="hljs-number">1000</span>));<br>        hashMap.put(<span class="hljs-string">&quot;sign&quot;</span>, getSign(body, secretKey));<br>        <span class="hljs-keyword">return</span> hashMap;<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="签名生成算法："><a href="#签名生成算法：" class="headerlink" title="签名生成算法："></a>签名生成算法：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 签名工具</span><br><span class="hljs-comment"> *</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author</span> 邓哈哈</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">SignUtils</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 生成签名</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> body</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> secretKey</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> String <span class="hljs-title function_">getSign</span><span class="hljs-params">(String body, String secretKey)</span> &#123;<br>        <span class="hljs-type">Digester</span> <span class="hljs-variable">md5</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Digester</span>(DigestAlgorithm.SHA256);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">content</span> <span class="hljs-operator">=</span> body + <span class="hljs-string">&quot;.&quot;</span> + secretKey;<br>        <span class="hljs-keyword">return</span> md5.digestHex(content);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="服务器接受请求，拿到公钥和私钥，按约定的签名生成算法，生成sign，判断与请求中的sign是否一致：（2023-07-31午）"><a href="#服务器接受请求，拿到公钥和私钥，按约定的签名生成算法，生成sign，判断与请求中的sign是否一致：（2023-07-31午）" class="headerlink" title="服务器接受请求，拿到公钥和私钥，按约定的签名生成算法，生成sign，判断与请求中的sign是否一致：（2023/07/31午）"></a>服务器接受请求，拿到公钥和私钥，按约定的签名生成算法，生成sign，判断与请求中的sign是否一致：（2023/07/31午）</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs java">    <span class="hljs-meta">@PostMapping(&quot;/user&quot;)</span><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getUserNameByPost</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> User user, HttpServletRequest request)</span> &#123;<br>        <span class="hljs-type">String</span> <span class="hljs-variable">accessKey</span> <span class="hljs-operator">=</span> request.getHeader(<span class="hljs-string">&quot;accessKey&quot;</span>);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">nonce</span> <span class="hljs-operator">=</span> request.getHeader(<span class="hljs-string">&quot;nonce&quot;</span>);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">timestamp</span> <span class="hljs-operator">=</span> request.getHeader(<span class="hljs-string">&quot;timestamp&quot;</span>);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">body</span> <span class="hljs-operator">=</span> request.getHeader(<span class="hljs-string">&quot;body&quot;</span>);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">sign</span> <span class="hljs-operator">=</span> request.getHeader(<span class="hljs-string">&quot;sign&quot;</span>);<br><span class="hljs-comment">//</span><br>        <span class="hljs-keyword">if</span> (!accessKey.equals(<span class="hljs-string">&quot;memory&quot;</span>)) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">RuntimeException</span>(<span class="hljs-string">&quot;无权限&quot;</span>);<br>        &#125;<br><span class="hljs-comment">//</span><br>        <span class="hljs-keyword">if</span> (Long.parseLong(nonce) &gt; <span class="hljs-number">10000</span>) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">RuntimeException</span>(<span class="hljs-string">&quot;无权限&quot;</span>);<br>        &#125;<br><br>        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;POST 我的名字是: &quot;</span> + user.getName();<br>    &#125;<br></code></pre></td></tr></table></figure>

<h3 id="吐槽"><a href="#吐槽" class="headerlink" title="吐槽"></a>吐槽</h3><ul>
<li><h5 id="这里启动MemoryClient服务之后，一定要留心是否抛出异常"><a href="#这里启动MemoryClient服务之后，一定要留心是否抛出异常" class="headerlink" title="这里启动MemoryClient服务之后，一定要留心是否抛出异常"></a>这里启动MemoryClient服务之后，一定要留心是否抛出异常</h5></li>
<li><h5 id="测试的时候，这边accessKey没传输，MemoryClient服务下一直抛异常，我没看到，盯着测试类的终端看了半天（2023-07-31晚）"><a href="#测试的时候，这边accessKey没传输，MemoryClient服务下一直抛异常，我没看到，盯着测试类的终端看了半天（2023-07-31晚）" class="headerlink" title="测试的时候，这边accessKey没传输，MemoryClient服务下一直抛异常，我没看到，盯着测试类的终端看了半天（2023/07/31晚）"></a>测试的时候，这边accessKey没传输，MemoryClient服务下一直抛异常，我没看到，盯着测试类的终端看了半天（2023/07/31晚）</h5></li>
</ul>
<h3 id="开发一个SDK"><a href="#开发一个SDK" class="headerlink" title="开发一个SDK"></a>开发一个SDK</h3><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>com.memory<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>memory-client-sdk<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">version</span>&gt;</span>0.0.1<span class="hljs-tag">&lt;/<span class="hljs-name">version</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">dependency</span>&gt;</span><br>         <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>org.springframework.boot<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br>         <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>spring-boot-starter-test<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br>         <span class="hljs-tag">&lt;<span class="hljs-name">scope</span>&gt;</span>test<span class="hljs-tag">&lt;/<span class="hljs-name">scope</span>&gt;</span><br>     <span class="hljs-tag">&lt;/<span class="hljs-name">dependency</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">build</span>&gt;</span><br>       <span class="hljs-tag">&lt;<span class="hljs-name">plugins</span>&gt;</span><br>           <span class="hljs-tag">&lt;<span class="hljs-name">plugin</span>&gt;</span><br>               <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>org.springframework.boot<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br>               <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>spring-boot-maven-plugin<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br>           <span class="hljs-tag">&lt;/<span class="hljs-name">plugin</span>&gt;</span><br>       <span class="hljs-tag">&lt;/<span class="hljs-name">plugins</span>&gt;</span><br>   <span class="hljs-tag">&lt;/<span class="hljs-name">build</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="接口的发布-下线"><a href="#接口的发布-下线" class="headerlink" title="接口的发布/下线"></a>接口的发布/下线</h2><h3 id="后台接口开发"><a href="#后台接口开发" class="headerlink" title="后台接口开发"></a>后台接口开发</h3><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 发布</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> idRequest</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> request</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@PostMapping(&quot;/online&quot;)</span><br>    <span class="hljs-meta">@AuthCheck(mustRole = &quot;admin&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;Boolean&gt; <span class="hljs-title function_">onlineInterfaceInfo</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> IdRequest idRequest,</span><br><span class="hljs-params">                                                     HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">//</span><br>        <span class="hljs-keyword">if</span> (idRequest == <span class="hljs-literal">null</span> || idRequest.getId() &lt;= <span class="hljs-number">0</span>) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARAMS_ERROR);<br>        &#125;<br>        <span class="hljs-type">long</span> <span class="hljs-variable">id</span> <span class="hljs-operator">=</span> idRequest.getId();<br>        <span class="hljs-comment">// 判断是否存在</span><br>        <span class="hljs-type">InterfaceInfo</span> <span class="hljs-variable">oldInterfaceInfo</span> <span class="hljs-operator">=</span> interfaceInfoService.getById(id);<br>        <span class="hljs-keyword">if</span> (oldInterfaceInfo == <span class="hljs-literal">null</span>) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_FOUND_ERROR);<br>        &#125;<br>        <span class="hljs-comment">// 判断该接口是否可以调用</span><br>        com.memory.clientsdk.model.<span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">com</span>.memory.clientsdk.model.User();<br>        user.setName(<span class="hljs-string">&quot;test&quot;</span>);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">username</span> <span class="hljs-operator">=</span> memoryClient.getUserByPost(user);<br>        <span class="hljs-keyword">if</span> (StringUtils.isBlank(username)) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.SYSTEM_ERROR, <span class="hljs-string">&quot;接口验证失败&quot;</span>);<br>        &#125;<br>        <span class="hljs-comment">// 仅本人或管理员可修改</span><br>        <span class="hljs-type">InterfaceInfo</span> <span class="hljs-variable">interfaceInfo</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">InterfaceInfo</span>();<br>        interfaceInfo.setId(id);<br>        interfaceInfo.setStatus(InterfaceInfoStatusEnum.ONLINE.getValue());<br><br>        <span class="hljs-type">boolean</span> <span class="hljs-variable">result</span> <span class="hljs-operator">=</span> interfaceInfoService.updateById(interfaceInfo);<br>        <span class="hljs-keyword">return</span> ResultUtils.success(result);<br>    &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 下线</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> idRequest</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> request</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@PostMapping(&quot;/offline&quot;)</span><br>    <span class="hljs-meta">@AuthCheck(mustRole = &quot;admin&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;Boolean&gt; <span class="hljs-title function_">offlineInterfaceInfo</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> IdRequest idRequest,</span><br><span class="hljs-params">                                                      HttpServletRequest request)</span> &#123;<br>        <span class="hljs-keyword">if</span> (idRequest == <span class="hljs-literal">null</span> || idRequest.getId() &lt;= <span class="hljs-number">0</span>) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARAMS_ERROR);<br>        &#125;<br>        <span class="hljs-type">long</span> <span class="hljs-variable">id</span> <span class="hljs-operator">=</span> idRequest.getId();<br>        <span class="hljs-comment">// 判断是否存在</span><br>        <span class="hljs-type">InterfaceInfo</span> <span class="hljs-variable">oldInterfaceInfo</span> <span class="hljs-operator">=</span> interfaceInfoService.getById(id);<br>        <span class="hljs-keyword">if</span> (oldInterfaceInfo == <span class="hljs-literal">null</span>) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_FOUND_ERROR);<br>        &#125;<br>        <span class="hljs-comment">// 仅本人或管理员可修改</span><br>        <span class="hljs-type">InterfaceInfo</span> <span class="hljs-variable">interfaceInfo</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">InterfaceInfo</span>();<br>        interfaceInfo.setId(id);<br>        interfaceInfo.setStatus(InterfaceInfoStatusEnum.OFFLINE.getValue());<br>        <span class="hljs-type">boolean</span> <span class="hljs-variable">result</span> <span class="hljs-operator">=</span> interfaceInfoService.updateById(interfaceInfo);<br>        <span class="hljs-keyword">return</span> ResultUtils.success(result);<br>    &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 接口状态 枚举</span><br>ONLINE(<span class="hljs-number">1</span>, <span class="hljs-string">&quot;发布&quot;</span>),<br>OFFLINE(<span class="hljs-number">0</span>, <span class="hljs-string">&quot;下线&quot;</span>);<br></code></pre></td></tr></table></figure>

<h3 id="前端页面展示"><a href="#前端页面展示" class="headerlink" title="前端页面展示"></a>前端页面展示</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs react">record.status === 0 ? &lt;a<br>      key=&quot;config&quot;<br>      onClick=&#123;() =&gt; &#123;<br>        handleOnline(&#123;record: record&#125;);<br>      &#125;&#125;<br>    &gt;<br>      发布<br>    &lt;/a&gt; : null,<br>    record.status === 1 ? &lt;Button<br>      type=&quot;text&quot;<br>      key=&quot;config&quot;<br>      danger<br>      onClick=&#123;() =&gt; &#123;<br>        handleOffline(record);<br>      &#125;&#125;<br>    &gt;<br>      下线<br>    &lt;/Button&gt; : null,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="至此，接口的发布-下线功能完成：（2023-08-16午）"><a href="#至此，接口的发布-下线功能完成：（2023-08-16午）" class="headerlink" title="至此，接口的发布/下线功能完成：（2023/08/16午）"></a>至此，接口的发布/下线功能完成：（2023/08/16午）</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230816152844795.png" alt="image-20230816152844795"></p>
<h2 id="接口调用-1"><a href="#接口调用-1" class="headerlink" title="接口调用"></a>接口调用</h2><h3 id="后端接口开发"><a href="#后端接口开发" class="headerlink" title="后端接口开发"></a>后端接口开发</h3><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 接口调用</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> interFaceInfoInvokeRequest 接口调用参数</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> request                    request</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@PostMapping(&quot;/invoke&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;Object&gt; <span class="hljs-title function_">invokeInterfaceInfo</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> InterFaceInfoInvokeRequest interFaceInfoInvokeRequest,</span><br><span class="hljs-params">                                                    HttpServletRequest request)</span> &#123;<br>        <span class="hljs-comment">// controller校验参数</span><br>        <span class="hljs-keyword">if</span> (interFaceInfoInvokeRequest == <span class="hljs-literal">null</span> || interFaceInfoInvokeRequest.getId() &lt;= <span class="hljs-number">0</span>) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARAMS_ERROR);<br>        &#125;<br>        <span class="hljs-type">long</span> <span class="hljs-variable">id</span> <span class="hljs-operator">=</span> interFaceInfoInvokeRequest.getId();<br>        <span class="hljs-type">String</span> <span class="hljs-variable">userRequestParams</span> <span class="hljs-operator">=</span> interFaceInfoInvokeRequest.getRequestParams();<br>        <span class="hljs-comment">// 判断是否存在</span><br>        <span class="hljs-type">InterfaceInfo</span> <span class="hljs-variable">oldInterfaceInfo</span> <span class="hljs-operator">=</span> interfaceInfoService.getById(id);<br>        <span class="hljs-keyword">if</span> (oldInterfaceInfo == <span class="hljs-literal">null</span>) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.NOT_FOUND_ERROR);<br>        &#125;<br>        <span class="hljs-comment">// 判断是否状态是否正常</span><br>        <span class="hljs-keyword">if</span> (oldInterfaceInfo.getStatus().equals(InterfaceInfoStatusEnum.OFFLINE.getValue())) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.PARAMS_ERROR, <span class="hljs-string">&quot;接口已关闭&quot;</span>);<br>        &#125;<br>        <span class="hljs-comment">// 用户调用接口</span><br>        <span class="hljs-type">User</span> <span class="hljs-variable">LoginUser</span> <span class="hljs-operator">=</span> userService.getLoginUser(request);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">accessKey</span> <span class="hljs-operator">=</span> LoginUser.getAccessKey();<br>        <span class="hljs-type">String</span> <span class="hljs-variable">secretKey</span> <span class="hljs-operator">=</span> LoginUser.getSecretKey();<br><br>        <span class="hljs-type">MemoryClient</span> <span class="hljs-variable">tempClient</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">MemoryClient</span>(accessKey, secretKey);<br>        <span class="hljs-type">Gson</span> <span class="hljs-variable">gson</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gson</span>();<br>        com.memory.clientsdk.model.<span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> gson.fromJson(userRequestParams, com.memory.clientsdk.model.User.class);<br>        <span class="hljs-comment">//TODO 根据不同地址调用对应接口</span><br>        <span class="hljs-type">String</span> <span class="hljs-variable">usernameByPost</span> <span class="hljs-operator">=</span> tempClient.getUserByPost(user);<br>        <span class="hljs-keyword">return</span> ResultUtils.success(usernameByPost);<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里在-interfaceInfo-表中新增了-requestParams（请求参数）字段"><a href="#这里在-interfaceInfo-表中新增了-requestParams（请求参数）字段" class="headerlink" title="这里在 interfaceInfo 表中新增了 requestParams（请求参数）字段"></a>这里在 interfaceInfo 表中新增了 requestParams（请求参数）字段</h5></li>
<li><h5 id="在-user-表中新增了-accessKey、secretKey-字段"><a href="#在-user-表中新增了-accessKey、secretKey-字段" class="headerlink" title="在 user 表中新增了 accessKey、secretKey 字段"></a>在 user 表中新增了 accessKey、secretKey 字段</h5></li>
</ul>
<h3 id="前端页面开发"><a href="#前端页面开发" class="headerlink" title="前端页面开发"></a>前端页面开发</h3><ul>
<li><h5 id="接口详情页实现路由跳转：（2023-08-16午）"><a href="#接口详情页实现路由跳转：（2023-08-16午）" class="headerlink" title="接口详情页实现路由跳转：（2023/08/16午）"></a>接口详情页实现路由跳转：（2023/08/16午）</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs react">renderItem=&#123;(item) =&gt; &#123;<br>     const apiLink = `/interfaceInfo/$&#123;item.id&#125;`;<br>     return (<br>       &lt;List.Item actions=&#123;[&lt;a key=&#123;item.id&#125; href=&#123;apiLink&#125;&gt;查看&lt;/a&gt;]&#125;&gt;<br>         &lt;List.Item.Meta<br>           title=&#123;&lt;a href=&#123;apiLink&#125;&gt;&#123;item.name&#125;&lt;/a&gt;&#125;<br>           description=&#123;item.description&#125;<br>         /&gt;<br>       &lt;/List.Item&gt;<br>     );<br>   &#125;&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="添加路由："><a href="#添加路由：" class="headerlink" title="添加路由："></a>添加路由：</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs react">//接口调用页<br>&#123;<br>  name: &#x27;接口调用&#x27;,<br>  icon: &#x27;user&#x27;,<br>  path: &#x27;/interfaceInfo/:id&#x27;,<br>  component: &#x27;./TableList/InterfaceInfo&#x27;,<br>&#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="接口调用页："><a href="#接口调用页：" class="headerlink" title="接口调用页："></a>接口调用页：</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs react">&lt;Card&gt;<br>        &#123;data ? (<br>          &lt;Descriptions title=&#123;data.name&#125; column=&#123;1&#125;&gt;<br>            &lt;Descriptions.Item label=&quot;接口状态&quot;&gt;&#123;data.status ? &#x27;开启&#x27; : &#x27;关闭&#x27;&#125;&lt;/Descriptions.Item&gt;<br>            &lt;Descriptions.Item label=&quot;描述&quot;&gt;&#123;data.description&#125;&lt;/Descriptions.Item&gt;<br>            &lt;Descriptions.Item label=&quot;请求地址&quot;&gt;&#123;data.url&#125;&lt;/Descriptions.Item&gt;<br>            &lt;Descriptions.Item label=&quot;请求方法&quot;&gt;&#123;data.method&#125;&lt;/Descriptions.Item&gt;<br>            &lt;Descriptions.Item label=&quot;请求参数&quot;&gt;&#123;data.requestParams&#125;&lt;/Descriptions.Item&gt;<br>            &lt;Descriptions.Item label=&quot;请求头&quot;&gt;&#123;data.requestHeader&#125;&lt;/Descriptions.Item&gt;<br>            &lt;Descriptions.Item label=&quot;响应头&quot;&gt;&#123;data.responseHeader&#125;&lt;/Descriptions.Item&gt;<br>            &lt;Descriptions.Item label=&quot;创建时间&quot;&gt;&#123;data.createTime&#125;&lt;/Descriptions.Item&gt;<br>            &lt;Descriptions.Item label=&quot;更新时间&quot;&gt;&#123;data.updateTime&#125;&lt;/Descriptions.Item&gt;<br>          &lt;/Descriptions&gt;<br>        ) : (<br>          &lt;&gt;接口不存在&lt;/&gt;<br>        )&#125;<br>      &lt;/Card&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="接口调用页面-开发完毕："><a href="#接口调用页面-开发完毕：" class="headerlink" title="接口调用页面 开发完毕："></a>接口调用页面 开发完毕：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230816173416646.png" alt="image-20230816173416646"></p>
<h3 id="请求参数"><a href="#请求参数" class="headerlink" title="请求参数"></a>请求参数</h3><ul>
<li><h5 id="填写请求参数，发送请求"><a href="#填写请求参数，发送请求" class="headerlink" title="填写请求参数，发送请求"></a>填写请求参数，发送请求</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs react">&lt;Card title=&quot;在线测试&quot;&gt;<br>      &lt;Form name=&quot;invoke&quot; layout=&quot;vertical&quot; onFinish=&#123;onFinish&#125;&gt;<br>        &lt;Form.Item label=&quot;请求参数&quot; name=&quot;userRequestParams&quot; &gt;<br>          &lt;Input.TextArea/&gt;<br>        &lt;/Form.Item&gt;<br>        &lt;Form.Item wrapperCol=&#123;&#123;span: 16&#125;&#125;&gt;<br>          &lt;Button type=&quot;primary&quot; htmlType=&quot;submit&quot;&gt;<br>            调用<br>          &lt;/Button&gt;<br>        &lt;/Form.Item&gt;<br>      &lt;/Form&gt;<br>    &lt;/Card&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs react">// 调用接口<br>const onFinish = async (values: any) =&gt; &#123;<br>  if (!params.id) &#123;<br>    message.error(&#x27;接口不存在&#x27;);<br>    return;<br>  &#125;<br>  setInvokeLoading(true);<br>  try &#123;<br>    const res = await invokeInterfaceInfoUsingPOST(&#123;<br>      id: params.id,<br>      ...values,<br>    &#125;);<br>    setInvokeRes(res.data);<br>    message.success(&#x27;请求成功&#x27;);<br>  &#125; catch (error: any) &#123;<br>    message.error(&#x27;操作失败，&#x27; + error.message);<br>  &#125;<br>  setInvokeLoading(false);<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="调用成功！如下图所示：（2023-08-17早）"><a href="#调用成功！如下图所示：（2023-08-17早）" class="headerlink" title="调用成功！如下图所示：（2023/08/17早）"></a>调用成功！如下图所示：（2023/08/17早）</h5></li>
</ul>
<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230817105054929.png" alt="image-20230817105054929"></p>
<h2 id="统计接口调用次数"><a href="#统计接口调用次数" class="headerlink" title="统计接口调用次数"></a>统计接口调用次数</h2><ul>
<li><h5 id="我们实现了：用户可以在前台页面，调用后台提供的接口服务"><a href="#我们实现了：用户可以在前台页面，调用后台提供的接口服务" class="headerlink" title="我们实现了：用户可以在前台页面，调用后台提供的接口服务"></a>我们实现了：用户可以在前台页面，调用后台提供的接口服务</h5></li>
<li><p>接下来，我们要实现用户调用每个接口调用的总次数、剩余的调用次数，以保证接口的规范性</p>
</li>
<li><p>这个功能实现很简单：</p>
<ul>
<li>建立用户-接口信息表，统计调用总次数、剩余次数</li>
<li>实现某个接口调用后，该用户调用总次数+1，剩余次数-1</li>
<li>详细业务流程，日后再表</li>
</ul>
</li>
<li><h5 id="建立用户-接口信息表："><a href="#建立用户-接口信息表：" class="headerlink" title="建立用户-接口信息表："></a>建立用户-接口信息表：</h5></li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs"><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="统计接口调用次数："><a href="#统计接口调用次数：" class="headerlink" title="统计接口调用次数："></a>统计接口调用次数：</h5></li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs"><br></code></pre></td></tr></table></figure>

<h2 id="GateWay网关"><a href="#GateWay网关" class="headerlink" title="GateWay网关"></a>GateWay网关</h2><ul>
<li><p>有关网关的相关知识，可以在《深入理解GateWay网关：原理、功能和用途》一文中了解到</p>
</li>
<li><h5 id="GateWay官网：https-docs-spring-io-spring-cloud-gateway-docs-current-reference-html"><a href="#GateWay官网：https-docs-spring-io-spring-cloud-gateway-docs-current-reference-html" class="headerlink" title="GateWay官网：https://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/"></a>GateWay官网：<a target="_blank" rel="noopener" href="https://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/">https://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/</a></h5></li>
<li><p>接下来，我们着手使用 GateWay 网关转发请求路由：</p>
</li>
<li><h5 id="编写GateWay网关全局过滤器：（2023-08-19晚）"><a href="#编写GateWay网关全局过滤器：（2023-08-19晚）" class="headerlink" title="编写GateWay网关全局过滤器：（2023/08/19晚）"></a>编写GateWay网关全局过滤器：（2023/08/19晚）</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java"> <span class="hljs-comment">// 白名单</span><br><span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> List&lt;String&gt; IP_WHITE_HOSTS = Arrays.asList(<span class="hljs-string">&quot;127.0.0.1:8090&quot;</span>);<br> <span class="hljs-comment">// 请求路由</span><br> <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-type">String</span> <span class="hljs-variable">INTERFACE_HOST</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;http://localhost:8090&quot;</span>;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><code class="hljs java"> <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 过滤请求</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> exchange</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> chain</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-meta">@Override</span><br>    <span class="hljs-keyword">public</span> Mono&lt;Void&gt; <span class="hljs-title function_">filter</span><span class="hljs-params">(ServerWebExchange exchange, GatewayFilterChain chain)</span> &#123;<br>        <span class="hljs-comment">// 1. 用户发送请求到 API 网关</span><br>        <span class="hljs-comment">// 2. 请求日志</span><br>        <span class="hljs-type">ServerHttpRequest</span> <span class="hljs-variable">request</span> <span class="hljs-operator">=</span> exchange.getRequest();<br>        log.info(<span class="hljs-string">&quot;请求唯一标识:&#123;&#125;&quot;</span>, request.getId());<br>        <span class="hljs-type">String</span> <span class="hljs-variable">path</span> <span class="hljs-operator">=</span> INTERFACE_HOST + request.getPath();<br>        log.info(<span class="hljs-string">&quot;请求路径:&#123;&#125;&quot;</span>, path);<br>        log.info(<span class="hljs-string">&quot;请求方法:&#123;&#125;&quot;</span>, request.getMethod());<br>        log.info(<span class="hljs-string">&quot;请求参数:&#123;&#125;&quot;</span>, request.getQueryParams());<br>        <span class="hljs-type">String</span> <span class="hljs-variable">sourceAddress</span> <span class="hljs-operator">=</span> request.getLocalAddress().toString();<br>        log.info(<span class="hljs-string">&quot;请求来源地址:&#123;&#125;&quot;</span>, sourceAddress);<br>        log.info(<span class="hljs-string">&quot;请求目标地址:&#123;&#125;&quot;</span>, request.getRemoteAddress());<br>        <span class="hljs-type">ServerHttpResponse</span> <span class="hljs-variable">response</span> <span class="hljs-operator">=</span> exchange.getResponse();<br>        <span class="hljs-comment">// 3. 黑白名单</span><br>        <span class="hljs-keyword">if</span> (!IP_WHITE_HOSTS.contains(sourceAddress)) &#123;<br>            <span class="hljs-comment">// 设置错误状态码并返回</span><br><span class="hljs-comment">//            response.setStatusCode(HttpStatus.FORBIDDEN);</span><br><span class="hljs-comment">//            return response.setComplete();</span><br>        &#125;<br><br>        <span class="hljs-comment">// 4. 用户鉴权（判断 accessKey, secretKey 是否合法）</span><br>        <span class="hljs-type">HttpHeaders</span> <span class="hljs-variable">headers</span> <span class="hljs-operator">=</span> request.getHeaders();<br>        <span class="hljs-type">String</span> <span class="hljs-variable">accessKey</span> <span class="hljs-operator">=</span> headers.getFirst(<span class="hljs-string">&quot;accessKey&quot;</span>);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">nonce</span> <span class="hljs-operator">=</span> headers.getFirst(<span class="hljs-string">&quot;nonce&quot;</span>);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">timestamp</span> <span class="hljs-operator">=</span> headers.getFirst(<span class="hljs-string">&quot;timestamp&quot;</span>);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">body</span> <span class="hljs-operator">=</span> headers.getFirst(<span class="hljs-string">&quot;body&quot;</span>);<br>        <span class="hljs-type">String</span> <span class="hljs-variable">sign</span> <span class="hljs-operator">=</span> headers.getFirst(<span class="hljs-string">&quot;sign&quot;</span>);<br><br>        <span class="hljs-comment">// 4.1.校验accessKey</span><br>        <span class="hljs-comment">// todo 从数据库中查询, accessKey是否分配给该用户</span><br>        <span class="hljs-keyword">if</span> (accessKey == <span class="hljs-literal">null</span> || !accessKey.equals(<span class="hljs-string">&quot;memory&quot;</span>)) &#123;<br>            <span class="hljs-keyword">return</span> handleNoAuth(response);<br>        &#125;<br>        <span class="hljs-comment">// 4.2.校验nonce 不能超过10000</span><br>        <span class="hljs-keyword">if</span> (nonce == <span class="hljs-literal">null</span> || Long.parseLong(nonce) &gt; <span class="hljs-number">10000</span>) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">RuntimeException</span>(<span class="hljs-string">&quot;无权限&quot;</span>);<br>        &#125;<br>        <span class="hljs-comment">// 4.3.校验timestamp 不能超时5分钟</span><br>        <span class="hljs-keyword">final</span> <span class="hljs-type">long</span> <span class="hljs-variable">FIVE_MINUTES</span> <span class="hljs-operator">=</span> <span class="hljs-number">60L</span> * <span class="hljs-number">5L</span>;<br>        <span class="hljs-keyword">if</span> (timestamp == <span class="hljs-literal">null</span> || System.currentTimeMillis() / <span class="hljs-number">1000L</span> - Long.parseLong(timestamp) &gt;= FIVE_MINUTES) &#123;<br>            <span class="hljs-keyword">return</span> handleNoAuth(response);<br>        &#125;<br>        <span class="hljs-comment">// 4.4.校验body</span><br>        <span class="hljs-keyword">if</span> (body == <span class="hljs-literal">null</span>)<br>            <span class="hljs-keyword">return</span> handleNoAuth(response);<br><br>        <span class="hljs-comment">// 4.5.校验sign</span><br>        <span class="hljs-comment">// todo 从数据库中查询, secretKey是否分配给该用户</span><br>        <span class="hljs-type">String</span> <span class="hljs-variable">secretKey</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;123456&quot;</span>;<br>        <span class="hljs-type">String</span> <span class="hljs-variable">serverSign</span> <span class="hljs-operator">=</span> SignUtils.getSign(body, secretKey);<br>        <span class="hljs-keyword">if</span> (sign == <span class="hljs-literal">null</span> || !sign.equals(serverSign)) &#123;<br>            <span class="hljs-keyword">return</span> handleNoAuth(response);<br>        &#125;<br><br>        <span class="hljs-comment">// 5. 请求的模拟接口是否存在</span><br>        <span class="hljs-comment">// todo 从数据库中查询请求调用的接口是否存在 请求方法是否匹配 请求参数是否符合要求等</span><br><br>        <span class="hljs-comment">// 6. 响应日志</span><br>        Mono&lt;Void&gt; result = chain.filter(exchange);<br><span class="hljs-comment">//        Mono&lt;Void&gt; result = handelResponse(exchange, chain);</span><br><br>        <span class="hljs-comment">// 7. 调用成功，次数 + 1</span><br>        <span class="hljs-comment">// todo 接口调用次数·+1, invokeCount</span><br><br>        <span class="hljs-comment">// 8. 调用失败，返回一个规范的错误码</span><br><br>        <span class="hljs-keyword">return</span> result;<br>    &#125;<br><br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * Response 请求处理</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> exchange exchange</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> chain    chain</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 接口响应</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> Mono&lt;Void&gt; <span class="hljs-title function_">handelResponse</span><span class="hljs-params">(ServerWebExchange exchange, GatewayFilterChain chain)</span> &#123;<br>        <span class="hljs-keyword">try</span> &#123;<br>            <span class="hljs-type">ServerHttpResponse</span> <span class="hljs-variable">originalResponse</span> <span class="hljs-operator">=</span> exchange.getResponse();<br>            <span class="hljs-type">DataBufferFactory</span> <span class="hljs-variable">bufferFactory</span> <span class="hljs-operator">=</span> originalResponse.bufferFactory();<br><br>            <span class="hljs-type">HttpStatus</span> <span class="hljs-variable">statusCode</span> <span class="hljs-operator">=</span> originalResponse.getStatusCode();<br><br>            <span class="hljs-keyword">if</span> (statusCode == HttpStatus.OK) &#123;<br>                <span class="hljs-type">ServerHttpResponseDecorator</span> <span class="hljs-variable">decoratedResponse</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">ServerHttpResponseDecorator</span>(originalResponse) &#123;<br><br>                    <span class="hljs-meta">@Override</span><br>                    <span class="hljs-keyword">public</span> Mono&lt;Void&gt; <span class="hljs-title function_">writeWith</span><span class="hljs-params">(Publisher&lt;? extends DataBuffer&gt; body)</span> &#123;<br>                        <span class="hljs-comment">//log.info(&quot;body instanceof Flux: &#123;&#125;&quot;, (body instanceof Flux));</span><br>                        <span class="hljs-keyword">if</span> (body <span class="hljs-keyword">instanceof</span> Flux) &#123;<br>                            Flux&lt;? <span class="hljs-keyword">extends</span> <span class="hljs-title class_">DataBuffer</span>&gt; fluxBody = Flux.from(body);<br>                            <span class="hljs-comment">//</span><br>                            <span class="hljs-keyword">return</span> <span class="hljs-built_in">super</span>.writeWith(fluxBody.map(dataBuffer -&gt; &#123;<br>                                <span class="hljs-comment">// 7. 调用成功，接口调用次数 + 1 invokeCount</span><br><span class="hljs-comment">//                                try &#123;</span><br><span class="hljs-comment">//                                    innerUserInterfaceInfoService.invokeCount(interfaceInfoId, userId);</span><br><span class="hljs-comment">//                                &#125; catch (Exception e) &#123;</span><br><span class="hljs-comment">//                                    log.error(&quot;invokeCount error&quot;, e);</span><br><span class="hljs-comment">//                                &#125;</span><br>                                <span class="hljs-type">byte</span>[] content = <span class="hljs-keyword">new</span> <span class="hljs-title class_">byte</span>[dataBuffer.readableByteCount()];<br>                                dataBuffer.read(content);<br>                                DataBufferUtils.release(dataBuffer);<span class="hljs-comment">//释放掉内存</span><br>                                <span class="hljs-comment">// 构建日志</span><br>                                <span class="hljs-type">StringBuilder</span> <span class="hljs-variable">sb2</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">StringBuilder</span>(<span class="hljs-number">200</span>);<br>                                sb2.append(<span class="hljs-string">&quot;&lt;--- &#123;&#125; &#123;&#125; \n&quot;</span>);<br>                                List&lt;Object&gt; rspArgs = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span>&lt;&gt;();<br>                                rspArgs.add(originalResponse.getStatusCode());<br>                                <span class="hljs-comment">//rspArgs.add(requestUrl);</span><br>                                <span class="hljs-type">String</span> <span class="hljs-variable">data</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">String</span>(content, StandardCharsets.UTF_8);<span class="hljs-comment">//data</span><br>                                sb2.append(data);<br>                                log.info(sb2.toString(), rspArgs.toArray());<span class="hljs-comment">//log.info(&quot;&lt;-- &#123;&#125; &#123;&#125;\n&quot;, originalResponse.getStatusCode(), data);</span><br>                                <span class="hljs-keyword">return</span> bufferFactory.wrap(content);<br>                            &#125;));<br>                        &#125; <span class="hljs-keyword">else</span> &#123;<br>                            log.error(<span class="hljs-string">&quot;&lt;--- &#123;&#125; 响应code异常&quot;</span>, getStatusCode());<br>                        &#125;<br>                        <span class="hljs-keyword">return</span> <span class="hljs-built_in">super</span>.writeWith(body);<br>                    &#125;<br>                &#125;;<br>                <span class="hljs-keyword">return</span> chain.filter(exchange.mutate().response(decoratedResponse).build());<br>            &#125;<br>            <span class="hljs-keyword">return</span> chain.filter(exchange);<span class="hljs-comment">//降级处理返回数据</span><br>        &#125; <span class="hljs-keyword">catch</span> (Exception e) &#123;<br>            log.error(<span class="hljs-string">&quot;gateway log exception.\n&quot;</span> + e);<br>            <span class="hljs-keyword">return</span> chain.filter(exchange);<br>        &#125;<br>    &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">public</span> Mono&lt;Void&gt; <span class="hljs-title function_">handleNoAuth</span><span class="hljs-params">(ServerHttpResponse response)</span> &#123;<br>      <span class="hljs-comment">// 设置状态码并返回</span><br>      response.setStatusCode(HttpStatus.FORBIDDEN);<br>      <span class="hljs-keyword">return</span> response.setComplete();<br>  &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="改写-memory-client-sdk-中的请求路径，请求打到-GateWay网关-而非直接请求到-MemoryClient，比如："><a href="#改写-memory-client-sdk-中的请求路径，请求打到-GateWay网关-而非直接请求到-MemoryClient，比如：" class="headerlink" title="改写 memory-client-sdk 中的请求路径，请求打到 GateWay网关 而非直接请求到 MemoryClient，比如："></a>改写 memory-client-sdk 中的请求路径，请求打到 GateWay网关 而非直接请求到 MemoryClient，比如：</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">public</span> String <span class="hljs-title function_">getUserByPost</span><span class="hljs-params">(User user)</span> &#123;<br>      <span class="hljs-type">String</span> <span class="hljs-variable">json</span> <span class="hljs-operator">=</span> JSONUtil.toJsonStr(user);<br>      <span class="hljs-keyword">return</span> ((HttpRequest)HttpRequest.post(<span class="hljs-string">&quot;http://localhost:8090/api/name/user&quot;</span>).addHeaders(<span class="hljs-built_in">this</span>.getHeaderMap(json))).body(json).execute().body();<br>  &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在前端测试请求，请求成功，结果如下："><a href="#在前端测试请求，请求成功，结果如下：" class="headerlink" title="在前端测试请求，请求成功，结果如下："></a>在前端测试请求，请求成功，结果如下：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230819203736592.png" alt="image-20230819203736592"></p>
<h2 id="整体架构"><a href="#整体架构" class="headerlink" title="整体架构"></a>整体架构</h2><ul>
<li><h5 id="到目前为止，我们引入了网关，整体架构基本成型，如下所示：（2023-08-19晚）"><a href="#到目前为止，我们引入了网关，整体架构基本成型，如下所示：（2023-08-19晚）" class="headerlink" title="到目前为止，我们引入了网关，整体架构基本成型，如下所示：（2023/08/19晚）"></a>到目前为止，我们引入了网关，整体架构基本成型，如下所示：（2023/08/19晚）</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230819205032864.png" alt="image-20230819205032864"></p>
<h2 id="梳理网关业务逻辑"><a href="#梳理网关业务逻辑" class="headerlink" title="梳理网关业务逻辑"></a>梳理网关业务逻辑</h2><ul>
<li><h5 id="到此为止，我们梳理下引入网关服务后，用户调用接口时，整体项目的业务流程：（2023-08-23晚）"><a href="#到此为止，我们梳理下引入网关服务后，用户调用接口时，整体项目的业务流程：（2023-08-23晚）" class="headerlink" title="到此为止，我们梳理下引入网关服务后，用户调用接口时，整体项目的业务流程：（2023/08/23晚）"></a>到此为止，我们梳理下引入网关服务后，用户调用接口时，整体项目的业务流程：（2023/08/23晚）</h5><ul>
<li>用户点击调用接口</li>
<li>memory-api-backend处理HTTP请求</li>
<li>引入memory-client-sdk工具包，转发请求至GateWay网关</li>
<li>GateWay网关统一鉴权、将路由转发至memory-client</li>
<li>memory-client处理该请求，调用对应的后台接口，调用成功后返回响应结果</li>
</ul>
</li>
</ul>
<h2 id="Dubbo远程调用"><a href="#Dubbo远程调用" class="headerlink" title="Dubbo远程调用"></a>Dubbo远程调用</h2><h3 id="业务流程分析"><a href="#业务流程分析" class="headerlink" title="业务流程分析"></a>业务流程分析</h3><ul>
<li><p>这个步骤的作用是什么呢？</p>
</li>
<li><p>前面我们引入了GateWay网关，对调用后台接口的请求作统一鉴权，包括以下几方面：</p>
<ul>
<li>确认调用者权限、是否分配accessKey、secretKey，是否剩余调用次数</li>
<li>确认被调用接口是否存在、是否发布上线</li>
<li>执行调用，做好后台用户-接口的调用次数统计，比如调用次数totalNum+1、剩余次数leftNum-1</li>
</ul>
</li>
<li><h5 id="以上业务流程执行完毕以后，GateWay网关才会把用户请求转发给后台接口，由后台接口响应请求（2023-08-23晚）"><a href="#以上业务流程执行完毕以后，GateWay网关才会把用户请求转发给后台接口，由后台接口响应请求（2023-08-23晚）" class="headerlink" title="以上业务流程执行完毕以后，GateWay网关才会把用户请求转发给后台接口，由后台接口响应请求（2023/08/23晚）"></a>以上业务流程执行完毕以后，GateWay网关才会把用户请求转发给后台接口，由后台接口响应请求（2023/08/23晚）</h5></li>
<li><p>这些统一鉴权操作都涉及到对数据库的操作，在GateWay网关中，该如何实现呢？</p>
</li>
<li><h5 id="而我们不希望在GateWay网关中实现这些方法，我们可以在网关中，调用其他项目的方法"><a href="#而我们不希望在GateWay网关中实现这些方法，我们可以在网关中，调用其他项目的方法" class="headerlink" title="而我们不希望在GateWay网关中实现这些方法，我们可以在网关中，调用其他项目的方法"></a>而我们不希望在GateWay网关中实现这些方法，我们可以在网关中，调用其他项目的方法</h5></li>
</ul>
<h3 id="如何调用其他项目的方法"><a href="#如何调用其他项目的方法" class="headerlink" title="如何调用其他项目的方法"></a>如何调用其他项目的方法</h3><ol>
<li>复制代码、依赖和环境</li>
<li>HTTP 请求（提供/暴露一个接口，供其他项目使用）</li>
<li>RPC</li>
<li>把公共的代码打包 JAR 包，其他项目引用（客户端 SDK）</li>
</ol>
<ul>
<li><h5 id="我们这里选用RPC方法调用远程服务（2023-08-23晚）"><a href="#我们这里选用RPC方法调用远程服务（2023-08-23晚）" class="headerlink" title="我们这里选用RPC方法调用远程服务（2023/08/23晚）"></a>我们这里选用RPC方法调用远程服务（2023/08/23晚）</h5></li>
</ul>
<h3 id="RPC"><a href="#RPC" class="headerlink" title="RPC"></a>RPC</h3><p><strong>作用：像本地方法一样调用远程方法</strong></p>
<ol>
<li>对开发者更透明，减少了很多的沟通 成本</li>
<li>RPC 想远程服务器发送请求时，未必要使用 HTTP 请求，比如还可以用 TCP/IP，性能更高（内部服务更适用）</li>
</ol>
<h3 id="Dubbo-框架（RPC-实现）"><a href="#Dubbo-框架（RPC-实现）" class="headerlink" title="Dubbo 框架（RPC 实现）"></a>Dubbo 框架（RPC 实现）</h3><ul>
<li>GRPC、TRPC</li>
</ul>
<ul>
<li><h5 id="官方文档：https-cn-dubbo-apache-org-zh-docs3-v2-java-sdk-quick-start-spring-boot"><a href="#官方文档：https-cn-dubbo-apache-org-zh-docs3-v2-java-sdk-quick-start-spring-boot" class="headerlink" title="官方文档：https://cn.dubbo.apache.org/zh/docs3-v2/java-sdk/quick-start/spring-boot/"></a>官方文档：<a target="_blank" rel="noopener" href="https://cn.dubbo.apache.org/zh/docs3-v2/java-sdk/quick-start/spring-boot/">https://cn.dubbo.apache.org/zh/docs3-v2/java-sdk/quick-start/spring-boot/</a></h5></li>
<li><p>两种使用方式：</p>
<ul>
<li><p>Spring Boot 代码（注解 + 编程式）：写 Java 接口，服务提供者和消费者都去引用这个接口</p>
</li>
<li><p>IDL（接口调用语言）：创建一个公共的接口定义文件，服务提供者和消费者都去读取这个文件。优点是跨语言，所有的框架都熟悉。</p>
</li>
</ul>
</li>
<li><p>底层是 Triple 协议：<a target="_blank" rel="noopener" href="https://cn.dubbo.apache.org/zh/docs3-v2/java-sdk/concepts-and-architecture/triple/">https://cn.dubbo.apache.org/zh/docs3-v2/java-sdk/concepts-and-architecture/triple/</a></p>
</li>
</ul>
<h4 id="示例学习"><a href="#示例学习" class="headerlink" title="示例学习"></a>示例学习</h4><ul>
<li>zookeeper 注册中心：通过内嵌的方式运行，更方便</li>
</ul>
<ul>
<li><p>最先启动注册中心，先启动服务提供者，再启动服务消费者</p>
</li>
<li><p>有关 Dubbo 框架 + Nacos / ZooKeeper 实现调用远程服务，可以在官方文档中了解到：</p>
</li>
<li><h5 id="Nacos-快速开始"><a href="#Nacos-快速开始" class="headerlink" title="Nacos 快速开始"></a><a target="_blank" rel="noopener" href="https://nacos.io/zh-cn/docs/quick-start.html">Nacos 快速开始</a></h5></li>
<li><h5 id="Nacos-Apache-Dubbo"><a href="#Nacos-Apache-Dubbo" class="headerlink" title="Nacos | Apache Dubbo"></a><a target="_blank" rel="noopener" href="https://cn.dubbo.apache.org/zh-cn/overview/mannual/java-sdk/reference-manual/registry/nacos/">Nacos | Apache Dubbo</a></h5></li>
<li><h5 id="当然，也可以在该文章下了解学习：《从零开始构建分布式服务架构：用Dubbo和注册中心实现远程调用、服务注册与发现、配置管理》（2023-08-23晚）"><a href="#当然，也可以在该文章下了解学习：《从零开始构建分布式服务架构：用Dubbo和注册中心实现远程调用、服务注册与发现、配置管理》（2023-08-23晚）" class="headerlink" title="当然，也可以在该文章下了解学习：《从零开始构建分布式服务架构：用Dubbo和注册中心实现远程调用、服务注册与发现、配置管理》（2023/08/23晚）"></a>当然，也可以在该文章下了解学习：《从零开始构建分布式服务架构：用Dubbo和注册中心实现远程调用、服务注册与发现、配置管理》（2023/08/23晚）</h5></li>
</ul>
<h2 id="抽象公共服务"><a href="#抽象公共服务" class="headerlink" title="抽象公共服务"></a>抽象公共服务</h2><ul>
<li><p>了解了Dubbo实现远程调用原理，我们着手实现：</p>
</li>
<li><h5 id="抽象公共服务，提供接口，便于GateWay网关调用的同时，降低开发成本（2023-08-23晚）"><a href="#抽象公共服务，提供接口，便于GateWay网关调用的同时，降低开发成本（2023-08-23晚）" class="headerlink" title="抽象公共服务，提供接口，便于GateWay网关调用的同时，降低开发成本（2023/08/23晚）"></a>抽象公共服务，提供接口，便于GateWay网关调用的同时，降低开发成本（2023/08/23晚）</h5><ul>
<li>新建memory-commen项目，提供公共服务</li>
</ul>
</li>
</ul>
<ul>
<li>抽取User、InterfaceInfo等实体类到memory-commen中</li>
<li>memory-commen提供三个接口：校验用户、校验接口、执行调用</li>
<li>由memory-api-backend实现这三个接口，提供对外服务，并注册服务至nacos注册中心</li>
<li>GateWay网关向nacos注册中心调用服务，实现统一鉴权</li>
<li><h5 id="这里使用Maven实现公共服务的抽取，非常值得学习参考，详情可见《Maven奇技淫巧：优化项目构建与性能调优》一文"><a href="#这里使用Maven实现公共服务的抽取，非常值得学习参考，详情可见《Maven奇技淫巧：优化项目构建与性能调优》一文" class="headerlink" title="这里使用Maven实现公共服务的抽取，非常值得学习参考，详情可见《Maven奇技淫巧：优化项目构建与性能调优》一文"></a>这里使用Maven实现公共服务的抽取，非常值得学习参考，详情可见《Maven奇技淫巧：优化项目构建与性能调优》一文</h5></li>
</ul>
<h2 id="统计分析功能"><a href="#统计分析功能" class="headerlink" title="统计分析功能"></a>统计分析功能</h2><ul>
<li>开发一个新页面，统计调用次数最多的接口（调用次数多：收费提高，调用次数少：下线）</li>
</ul>
<h3 id="后端接口开发-1"><a href="#后端接口开发-1" class="headerlink" title="后端接口开发"></a>后端接口开发</h3><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@GetMapping(&quot;/top/interface/invoke&quot;)</span><br>    <span class="hljs-meta">@AuthCheck(mustRole = &quot;admin&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;List&lt;InterfaceInfoVO&gt;&gt; <span class="hljs-title function_">listTopInvokeInterfaceInfo</span><span class="hljs-params">()</span> &#123;<br>        List&lt;UserInterfaceInfo&gt; userInterfaceInfoList = userInterfaceInfoMapper.listTopInvokeInterfaceInfo(<span class="hljs-number">3</span>);<br>        Map&lt;Long, List&lt;UserInterfaceInfo&gt;&gt; interfaceInfoIdObjMap = userInterfaceInfoList.stream()<br>                .collect(Collectors.groupingBy(UserInterfaceInfo::getInterfaceInfoId));<br>        QueryWrapper&lt;InterfaceInfo&gt; queryWrapper = <span class="hljs-keyword">new</span> <span class="hljs-title class_">QueryWrapper</span>&lt;&gt;();<br>        queryWrapper.in(<span class="hljs-string">&quot;id&quot;</span>, interfaceInfoIdObjMap.keySet());<br>        List&lt;InterfaceInfo&gt; list = interfaceInfoService.list(queryWrapper);<br>        <span class="hljs-keyword">if</span> (CollectionUtils.isEmpty(list)) &#123;<br>            <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">BusinessException</span>(ErrorCode.SYSTEM_ERROR);<br>        &#125;<br>        List&lt;InterfaceInfoVO&gt; interfaceInfoVOList = list.stream().map(interfaceInfo -&gt; &#123;<br>            <span class="hljs-type">InterfaceInfoVO</span> <span class="hljs-variable">interfaceInfoVO</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">InterfaceInfoVO</span>();<br>            BeanUtils.copyProperties(interfaceInfo, interfaceInfoVO);<br>            <span class="hljs-type">int</span> <span class="hljs-variable">totalNum</span> <span class="hljs-operator">=</span> interfaceInfoIdObjMap.get(interfaceInfo.getId()).get(<span class="hljs-number">0</span>).getTotalNum();<br>            interfaceInfoVO.setTotalNum(totalNum);<br>            <span class="hljs-keyword">return</span> interfaceInfoVO;<br>        &#125;).collect(Collectors.toList());<br>        <span class="hljs-keyword">return</span> ResultUtils.success(interfaceInfoVOList);<br>    &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java">&lt;select id=<span class="hljs-string">&quot;listTopInvokeInterfaceInfo&quot;</span> resultType=<span class="hljs-string">&quot;com.example.memorycommen.model.entity.UserInterfaceInfo&quot;</span>&gt;<br>      select interfaceInfoId, sum(totalNum) as totalNum from user_interface_info group by interfaceInfoId<br>      order by totalNum desc limit #&#123;limit&#125;;<br>  &lt;/select&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="大致给出代码，这里涉及到在Mybatis中写原生SQL，还是很值得学习的，详情可见《快速启动：开发自己的定制化-Spring-Boot-项目模板》一文"><a href="#大致给出代码，这里涉及到在Mybatis中写原生SQL，还是很值得学习的，详情可见《快速启动：开发自己的定制化-Spring-Boot-项目模板》一文" class="headerlink" title="大致给出代码，这里涉及到在Mybatis中写原生SQL，还是很值得学习的，详情可见《快速启动：开发自己的定制化-Spring-Boot-项目模板》一文"></a>大致给出代码，这里涉及到在Mybatis中写原生SQL，还是很值得学习的，详情可见《快速启动：开发自己的定制化-Spring-Boot-项目模板》一文</h5></li>
</ul>
<h2 id="可视化数据图表"><a href="#可视化数据图表" class="headerlink" title="可视化数据图表"></a>可视化数据图表</h2><ul>
<li><h5 id="Apache-ECharts：Apache-ECharts"><a href="#Apache-ECharts：Apache-ECharts" class="headerlink" title="Apache ECharts：Apache ECharts"></a>Apache ECharts：<a target="_blank" rel="noopener" href="https://echarts.apache.org/zh/index.html">Apache ECharts</a></h5></li>
<li><h5 id="AntV：AntV-蚂蚁数据可视化"><a href="#AntV：AntV-蚂蚁数据可视化" class="headerlink" title="AntV：AntV | 蚂蚁数据可视化"></a>AntV：<a target="_blank" rel="noopener" href="https://antv.vision/">AntV | 蚂蚁数据可视化</a></h5></li>
<li><p>使用详情可见《前端框架踩坑与技巧总结：Ant Design、Vite，助您无忧编程》一文，效果如下：</p>
</li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230825191153348.png" alt="image-20230825191153348"></p>
<h2 id="梳理全局业务流程"><a href="#梳理全局业务流程" class="headerlink" title="梳理全局业务流程"></a>梳理全局业务流程</h2><ul>
<li><h5 id="接下来，我们将梳理用户选择调用接口，到接口成功响应并返回结果的全过程：（2023-08-24早）"><a href="#接下来，我们将梳理用户选择调用接口，到接口成功响应并返回结果的全过程：（2023-08-24早）" class="headerlink" title="接下来，我们将梳理用户选择调用接口，到接口成功响应并返回结果的全过程：（2023/08/24早）"></a>接下来，我们将梳理用户选择调用接口，到接口成功响应并返回结果的全过程：（2023/08/24早）</h5><ul>
<li>先后启动Nacos注册中心、memory-api-backend、GateWay网关服务、memory-client接口服务</li>
<li>用户调用接口，发起请求</li>
<li>处理请求，使用memory-client-sdk工具包，将请求转发至GateWay网关：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 用户调用接口</span><br><span class="hljs-type">User</span> <span class="hljs-variable">LoginUser</span> <span class="hljs-operator">=</span> userService.getLoginUser(request);<br><span class="hljs-type">String</span> <span class="hljs-variable">accessKey</span> <span class="hljs-operator">=</span> LoginUser.getAccessKey();<br><span class="hljs-type">String</span> <span class="hljs-variable">secretKey</span> <span class="hljs-operator">=</span> LoginUser.getSecretKey();<br>  <br><span class="hljs-type">MemoryClient</span> <span class="hljs-variable">tempClient</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">MemoryClient</span>(accessKey, secretKey);<br><span class="hljs-type">Gson</span> <span class="hljs-variable">gson</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gson</span>();<br>com.memory.clientsdk.model.<span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> gson.fromJson(userRequestParams, com.memory.clientsdk.model.User.class);<br><span class="hljs-comment">//TODO 根据不同地址调用对应接口</span><br><span class="hljs-type">String</span> <span class="hljs-variable">usernameByPost</span> <span class="hljs-operator">=</span> tempClient.getUserByPost(user);<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">  * <span class="hljs-doctag">@param</span> user</span><br><span class="hljs-comment">  */</span><br> <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getUserByPost</span><span class="hljs-params">(User user)</span> &#123;<br>     <span class="hljs-type">String</span> <span class="hljs-variable">json</span> <span class="hljs-operator">=</span> JSONUtil.toJsonStr(user);<br>  <br>     <span class="hljs-keyword">return</span> HttpRequest.post(GATEWAY_HOST + <span class="hljs-string">&quot;/api/name/user&quot;</span>)<br>             .addHeaders(getHeaderMap(json))<br>             .body(json)<br>             .execute()<br>             .body();<br> &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>GateWay网关作统一鉴权：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 4.1.校验accessKey</span><br>   <span class="hljs-comment">// todo 从数据库中查询, accessKey是否分配给该用户</span><br>   <span class="hljs-keyword">if</span> (accessKey == <span class="hljs-literal">null</span> || !accessKey.equals(<span class="hljs-string">&quot;memory&quot;</span>)) &#123;<br>       <span class="hljs-keyword">return</span> handleNoAuth(response);<br>   &#125;<br>   <span class="hljs-comment">// accessKey是否分配给该用户</span><br>   <span class="hljs-type">User</span> <span class="hljs-variable">invokeUser</span> <span class="hljs-operator">=</span> innerUserService.getInvokeUser(accessKey);<br>   <span class="hljs-keyword">if</span> (invokeUser == <span class="hljs-literal">null</span>) &#123;<br>       <span class="hljs-keyword">return</span> handleNoAuth(response);<br>   &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 4.5.校验sign</span><br>     <span class="hljs-comment">// todo 从数据库中查询, secretKey是否分配给该用户</span><br>     <span class="hljs-comment">// secretKey是否分配给该用户</span><br>     <span class="hljs-type">String</span> <span class="hljs-variable">secretKey</span> <span class="hljs-operator">=</span> invokeUser.getSecretKey();<br>     <span class="hljs-keyword">if</span> (secretKey == <span class="hljs-literal">null</span> || !secretKey.equals(<span class="hljs-string">&quot;123456&quot;</span>)) &#123;<br>         <span class="hljs-keyword">return</span> handleNoAuth(response);<br>     &#125;<br>  <br>     <span class="hljs-type">String</span> <span class="hljs-variable">serverSign</span> <span class="hljs-operator">=</span> SignUtils.getSign(body, secretKey);<br>     <span class="hljs-keyword">if</span> (sign == <span class="hljs-literal">null</span> || !sign.equals(serverSign)) &#123;<br>         <span class="hljs-keyword">return</span> handleNoAuth(response);<br>     &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 5. 请求的模拟接口是否存在</span><br>  <span class="hljs-comment">// todo 从数据库中查询请求调用的接口是否存在 请求方法是否匹配 请求参数是否符合要求等</span><br>  <span class="hljs-type">InterfaceInfo</span> <span class="hljs-variable">interfaceInfo</span> <span class="hljs-operator">=</span> innerInterfaceInfoService.getInterfaceInfo(path, method);<br>  <span class="hljs-keyword">if</span> (interfaceInfo == <span class="hljs-literal">null</span>) &#123;<br>      <span class="hljs-keyword">return</span> handleNoAuth(response);<br>  &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>GateWay转发请求，调用后台接口：</li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">spring:</span><br>  <span class="hljs-comment"># 网关过滤</span><br>  <span class="hljs-attr">cloud:</span><br>    <span class="hljs-attr">gateway:</span><br>      <span class="hljs-attr">routes:</span><br>        <span class="hljs-bullet">-</span> <span class="hljs-attr">id:</span> <span class="hljs-string">memory-api</span><br>          <span class="hljs-attr">uri:</span> <span class="hljs-string">http://localhost:8123</span><br>          <span class="hljs-attr">predicates:</span><br>            <span class="hljs-bullet">-</span> <span class="hljs-string">Path=/api/**</span><br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 6.调用接口</span><br><span class="hljs-keyword">return</span> handleResponse(exchange, chain, interfaceInfo.getId(), invokeUser.getId());<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">return</span> <span class="hljs-built_in">super</span>.writeWith(fluxBody.map(dataBuffer -&gt; &#123;<br>	<span class="hljs-comment">// todo 调用成功, 次数 + 1</span><br>	<span class="hljs-comment">// 7. 调用成功，接口调用次数 + 1 invokeCount</span><br>	<span class="hljs-keyword">try</span> &#123;<br>		innerUserInterfaceInfoService.invokeCount(interfaceInfoId, userId);<br>	&#125; <span class="hljs-keyword">catch</span> (Exception e) &#123;<br>		log.error(<span class="hljs-string">&quot;invokeCount error&quot;</span>, e);<br>	&#125;<br>    .....................<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>调用成功，返回响应结果：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@PostMapping(&quot;/user&quot;)</span><br>   <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getUserNameByPost</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> User user, HttpServletRequest request)</span> &#123;<br>       <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;POST 我的名字是: &quot;</span> + user.getName();<br>   &#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h2 id="后续优化"><a href="#后续优化" class="headerlink" title="后续优化"></a>后续优化</h2><h3 id="接口添加"><a href="#接口添加" class="headerlink" title="接口添加"></a>接口添加</h3><h4 id="随机显示一条名言"><a href="#随机显示一条名言" class="headerlink" title="随机显示一条名言"></a>随机显示一条名言</h4><ul>
<li>在Mappper中写自定义SQL查询语句</li>
</ul>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;getRandomWord&quot;</span> <span class="hljs-attr">resultType</span>=<span class="hljs-string">&quot;memory.cloud.memoryclient.domain.Words&quot;</span>&gt;</span><br>       select * from words where type = #&#123;type&#125; ORDER BY RAND() LIMIT 1;;<br>   <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="添加的时候还是有些许坎坷的，毕竟好长时间呢没看这个项目了，调用成功后，总算理清了整个接口调用的思路："><a href="#添加的时候还是有些许坎坷的，毕竟好长时间呢没看这个项目了，调用成功后，总算理清了整个接口调用的思路：" class="headerlink" title="添加的时候还是有些许坎坷的，毕竟好长时间呢没看这个项目了，调用成功后，总算理清了整个接口调用的思路："></a>添加的时候还是有些许坎坷的，毕竟好长时间呢没看这个项目了，调用成功后，总算理清了整个接口调用的思路：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230921135241899.png" alt="image-20230921135241899"></p>
<ul>
<li><h5 id="总结下简单的流程：（2023-09-21午）"><a href="#总结下简单的流程：（2023-09-21午）" class="headerlink" title="总结下简单的流程：（2023/09/21午）"></a>总结下简单的流程：（2023/09/21午）</h5><ul>
<li>用户携带参数请求接口</li>
<li>根据请求接口Id，校验判断该接口的可用性，借助sdk工具包调用该接口</li>
<li>sdk发送的调用接口的请求，首先来到 GateWay 作<strong>统一鉴权、统一业务处理、路由转发</strong>等操作</li>
<li>由<strong>网关转发接口请求到对应接口</strong>，处理完成后返回结果，完成接口调用</li>
</ul>
</li>
<li><h5 id="后续将进行页面优化，并提供多个简单的接口实现，目前有想法的接口实现为：（2023-09-21午）"><a href="#后续将进行页面优化，并提供多个简单的接口实现，目前有想法的接口实现为：（2023-09-21午）" class="headerlink" title="后续将进行页面优化，并提供多个简单的接口实现，目前有想法的接口实现为：（2023/09/21午）"></a>后续将进行页面优化，并提供多个简单的接口实现，目前有想法的接口实现为：（2023/09/21午）</h5><ul>
<li><strong>自动生成头像</strong></li>
<li><strong>返回随即壁纸</strong>（这个计划使用Java爬虫爬取别的网页数据，正好复习下这方面的知识，巩固MemorySearch的学习经验）</li>
<li><strong>在线翻译功能</strong>（暂时没有想法，接入别的在线翻译平台嘛）</li>
</ul>
</li>
</ul>
<h4 id="获取随机壁纸"><a href="#获取随机壁纸" class="headerlink" title="获取随机壁纸"></a>获取随机壁纸</h4><ul>
<li>基本流程跑通：<strong>（2023/11/19晚）</strong></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@PostMapping(&quot;/list/page/vo&quot;)</span><br><span class="hljs-keyword">public</span> BaseResponse&lt;Page&lt;Picture&gt;&gt; <span class="hljs-title function_">listPictureByPage</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> PictureQueryRequest pictureQueryRequest,</span><br><span class="hljs-params">                                                     HttpServletRequest request)</span> <span class="hljs-keyword">throws</span> IOException &#123;<br>    <span class="hljs-comment">// controller层对参数的校验</span><br>    <span class="hljs-type">int</span> <span class="hljs-variable">currentPage</span> <span class="hljs-operator">=</span> pictureQueryRequest.getCurrentPage();<br>    <span class="hljs-type">int</span> <span class="hljs-variable">pageSize</span> <span class="hljs-operator">=</span> pictureQueryRequest.getPageSize();<br>    <span class="hljs-type">String</span> <span class="hljs-variable">searchText</span> <span class="hljs-operator">=</span> pictureQueryRequest.getSearchText();<br><br>    Page&lt;Picture&gt; picturePage = pictureService.listPictureVOByPage(searchText, pageSize, currentPage);<br>    <span class="hljs-keyword">return</span> ResultUtils.success(picturePage);<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>接口改写成这样子了：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@RestController</span><br><span class="hljs-meta">@RequestMapping(&quot;/wallpaper&quot;)</span><br><span class="hljs-meta">@Slf4j</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">WallpaperController</span> &#123;<br>    <span class="hljs-meta">@Resource</span><br>    <span class="hljs-keyword">private</span> PictureService pictureService;<br><br><br>    <span class="hljs-meta">@PostMapping(&quot;/list/page/vo&quot;)</span><br>    <span class="hljs-keyword">public</span> BaseResponse&lt;Page&lt;Picture&gt;&gt; <span class="hljs-title function_">listPictureByPage</span><span class="hljs-params">(<span class="hljs-meta">@RequestBody</span> Picture picture)</span> <span class="hljs-keyword">throws</span> IOException &#123;<br>        <span class="hljs-comment">// controller层对参数的校验</span><br>        <span class="hljs-type">String</span> <span class="hljs-variable">category</span> <span class="hljs-operator">=</span> picture.getCategory();<br><br>        Page&lt;Picture&gt; picturePage = pictureService.listPictureVOByPage(category);<br>        <span class="hljs-keyword">return</span> ResultUtils.success(picturePage);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>妈的，出现了这样的报错：</li>
</ul>
<figure class="highlight smali"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs smali">om.fasterxml.jackson.databind.exc.InvalidDefinitionException: Cannot construct<span class="hljs-built_in"> instance </span>of `memory.cloud.memoryclient.model.domain.Picture` (no Creators, like default<span class="hljs-keyword"> constructor</span>, exist): cannot deserialize from Object value (no delegate-<span class="hljs-built_in"> or </span>property-based Creator)<br> at [Source: (org.springframework.util.StreamUtils$NonClosingInputStream); line: 1, column: 2]<br></code></pre></td></tr></table></figure>

<ul>
<li>排了一个小时的错，可算发现了：Picture 不支持序列化</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Picture</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">Serializable</span> &#123;<br>    <span class="hljs-keyword">public</span> <span class="hljs-title function_">Picture</span><span class="hljs-params">()</span> &#123;<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 所属分类</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String category;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 图片名</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String title;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 图片路径</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> String url;<br><br>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-type">long</span> <span class="hljs-variable">serialVersionUID</span> <span class="hljs-operator">=</span> <span class="hljs-number">1L</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>平时这种实体类都是使用 MybatisX-Generator 快速生成的，没注意到<strong>实体类要支持序列化</strong> <strong>（2023/11/20晚）</strong></li>
</ul>
<h3 id="根据不同url请求不同接口"><a href="#根据不同url请求不同接口" class="headerlink" title="根据不同url请求不同接口"></a>根据不同url请求不同接口</h3><ul>
<li><h5 id="每条接口的信息有：接口名、接口url、请求参数等等"><a href="#每条接口的信息有：接口名、接口url、请求参数等等" class="headerlink" title="每条接口的信息有：接口名、接口url、请求参数等等"></a>每条接口的信息有：接口名、接口url、请求参数等等</h5></li>
<li><p>当前情况是：用户调用接口时，前端传回了调用者的id，且<strong>仅实现了对后台一个接口的调用</strong></p>
</li>
<li><h5 id="问题是，当实现调用多个接口时，我们该如何保证用户对不同接口的调用，后台能够正确转发？"><a href="#问题是，当实现调用多个接口时，我们该如何保证用户对不同接口的调用，后台能够正确转发？" class="headerlink" title="问题是，当实现调用多个接口时，我们该如何保证用户对不同接口的调用，后台能够正确转发？"></a>问题是，当实现调用多个接口时，我们该如何保证用户对不同接口的调用，后台能够正确转发？</h5><ul>
<li>每个接口调用都写一个controller</li>
<li>统一controller接收接口调用请求，再分情况调用相应接口</li>
</ul>
</li>
<li><p>我比较倾向于第二种方法，但如何根据用户调用情况来调用不同的接口呢？我还没想好，目前计划使用switch枚举接口id来确定调用的接口</p>
</li>
<li><h5 id="因为现在开放的接口数量很少嘛，暂时这样也可行（2023-09-06午）"><a href="#因为现在开放的接口数量很少嘛，暂时这样也可行（2023-09-06午）" class="headerlink" title="因为现在开放的接口数量很少嘛，暂时这样也可行（2023/09/06午）"></a>因为现在开放的接口数量很少嘛，暂时这样也可行（2023/09/06午）</h5></li>
<li><h5 id="半个月前的想法还是很正确的，当时已经完成这个功能了，只不过没有记录实现思路（被GateWay网关传递中文乱码整麻了）"><a href="#半个月前的想法还是很正确的，当时已经完成这个功能了，只不过没有记录实现思路（被GateWay网关传递中文乱码整麻了）" class="headerlink" title="半个月前的想法还是很正确的，当时已经完成这个功能了，只不过没有记录实现思路（被GateWay网关传递中文乱码整麻了）"></a>半个月前的想法还是很正确的，当时已经完成这个功能了，只不过没有记录实现思路（被GateWay网关传递中文乱码整麻了）</h5></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">//TODO 根据不同地址调用对应接口</span><br>       <span class="hljs-type">String</span> <span class="hljs-variable">result</span> <span class="hljs-operator">=</span> interfaceIdSource.invokeInterfaceById(id, userRequestParams, tempClient);<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs java">  <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 调用接口</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> id 接口id</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">public</span> String <span class="hljs-title function_">invokeInterfaceById</span><span class="hljs-params">(Long id, String userRequestParams, MemoryClient tempClient)</span> &#123;<br>        <span class="hljs-comment">// 初始化interfaceInfoIdList</span><br><span class="hljs-comment">//        this.doInit();</span><br>        List&lt;Long&gt; interfaceInfoIdList = interfaceInfoMapper.getInterfaceInfoIdList();<br>        <span class="hljs-comment">// 处理其他未匹配到的情况</span><br>        ThrowUtils.throwIf(!interfaceInfoIdList.contains(id), ErrorCode.NOT_FOUND_ERROR, <span class="hljs-string">&quot;该接口不存在或已被禁用&quot;</span>);<br>        <span class="hljs-comment">// 匹配成功，调用接口</span><br>        <span class="hljs-built_in">this</span>.userRequestParams = userRequestParams;<br>        <span class="hljs-type">Gson</span> <span class="hljs-variable">gson</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Gson</span>();<br>        <span class="hljs-type">String</span> <span class="hljs-variable">result</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;&quot;</span>;<br>        <span class="hljs-keyword">if</span> (id == <span class="hljs-number">1646372563419L</span>) &#123;<br>            com.memory.clientsdk.model.<span class="hljs-type">User</span> <span class="hljs-variable">user</span> <span class="hljs-operator">=</span> gson.fromJson(userRequestParams, com.memory.clientsdk.model.User.class);<br>            result = tempClient.getUserByPost(user);<br>        &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (id == <span class="hljs-number">1646335784547L</span>) &#123;<br>            com.memory.clientsdk.model.<span class="hljs-type">Words</span> <span class="hljs-variable">words</span> <span class="hljs-operator">=</span> gson.fromJson(userRequestParams, com.memory.clientsdk.model.Words.class);<br>            result = tempClient.getRandomWord(words);<br>        &#125;<br>        <span class="hljs-keyword">return</span> result;<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里的实现方法还是挺丑陋的"><a href="#这里的实现方法还是挺丑陋的" class="headerlink" title="这里的实现方法还是挺丑陋的"></a>这里的实现方法还是挺丑陋的</h5><ul>
<li>因为接口调用时，传递了<strong>调用接口的id</strong>，在多次斟酌后，还是选择使用<strong>简单的if-else分支实现对不同接口的调用</strong></li>
</ul>
</li>
<li><h5 id="在这里当时还记录了一个踩坑经验：mapper-注入为-null，这次经历确实让我记忆犹新（2023-09-21午）"><a href="#在这里当时还记录了一个踩坑经验：mapper-注入为-null，这次经历确实让我记忆犹新（2023-09-21午）" class="headerlink" title="在这里当时还记录了一个踩坑经验：mapper 注入为 null，这次经历确实让我记忆犹新（2023/09/21午）"></a>在这里当时还记录了一个踩坑经验：mapper 注入为 null，这次经历确实让我记忆犹新（2023/09/21午）</h5></li>
</ul>
<h3 id="用户登录-登出体验优化"><a href="#用户登录-登出体验优化" class="headerlink" title="用户登录/登出体验优化"></a>用户登录/登出体验优化</h3><ul>
<li>在<strong>AvatarDropdown.tsx</strong>下，我修改了当用户未登录时的页面展示状态，并使用了<strong>umi插件</strong>的<strong>声明式页面跳转</strong>，完成<strong>用户登录跳转</strong>：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs react">// 未登录<br>  const unLoading = (<br>    &lt;span&gt;<br>      &lt;span&gt;<br>         &lt;h6&gt;还未登录&lt;/h6&gt;<br>      &lt;/span&gt;<br>      &lt;span className=&#123;actionClassName&#125;&gt;<br>        &lt;Link to=&quot;/user/login&quot;&gt;<br>        &lt;Button type=&quot;primary&quot; ghost&gt;<br>          去登录<br>        &lt;/Button&gt;<br>      &lt;/Link&gt;<br>      &lt;/span&gt;<br>    &lt;/span&gt;<br>  );<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-comment">// 如果用户未登录</span><br>  <span class="hljs-keyword">if</span> (!initialState) &#123;<br>    <span class="hljs-keyword">return</span> unLoading;<br>  &#125;<br><br>  <span class="hljs-keyword">const</span> &#123;loginUser&#125; = initialState;<br>  <span class="hljs-keyword">if</span> (!loginUser || !loginUser.<span class="hljs-property">userAvatar</span>) &#123;<br>    <span class="hljs-keyword">return</span> unLoading;<br>  &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="改写了原有的退出登录逻辑，更加简洁和符合逻辑："><a href="#改写了原有的退出登录逻辑，更加简洁和符合逻辑：" class="headerlink" title="改写了原有的退出登录逻辑，更加简洁和符合逻辑："></a>改写了原有的退出登录逻辑，更加简洁和符合逻辑：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">const</span> <span class="hljs-title function_">logout</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>   <span class="hljs-title function_">userLogoutUsingPOST</span>()<br>     .<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>         message.<span class="hljs-title function_">success</span>(<span class="hljs-string">&quot;退出登录成功&quot;</span>);<br>         <span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-title function_">reload</span>();<br>       &#125;<br>     )<br> &#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li>当前页面效果：</li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230922162009730.png" alt="image-20230922162009730"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230922161957348.png" alt="image-20230922161957348"></p>
<ul>
<li><h5 id="这里留下了疑问，也是我之前遇到的，即umi的声明式跳转使用不了，官方文档中的教程有问题（待解决，2023-09-22午）"><a href="#这里留下了疑问，也是我之前遇到的，即umi的声明式跳转使用不了，官方文档中的教程有问题（待解决，2023-09-22午）" class="headerlink" title="这里留下了疑问，也是我之前遇到的，即umi的声明式跳转使用不了，官方文档中的教程有问题（待解决，2023/09/22午）"></a>这里留下了疑问，也是我之前遇到的，即umi的声明式跳转使用不了，官方文档中的教程有问题（待解决，2023/09/22午）</h5></li>
<li><h5 id="在页面间跳转-UmiJS"><a href="#在页面间跳转-UmiJS" class="headerlink" title="在页面间跳转 | UmiJS"></a><a target="_blank" rel="noopener" href="https://v2.umijs.org/zh/guide/navigate-between-pages.html">在页面间跳转 | UmiJS</a></h5></li>
</ul>
<h3 id="丰富项目首页"><a href="#丰富项目首页" class="headerlink" title="丰富项目首页"></a>丰富项目首页</h3><ul>
<li>简单地优化了首页关于<strong>该项目的介绍</strong>和<strong>我的个人简介</strong></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230922170138843.png" alt="image-20230922170138843"></p>
<h3 id="区分管理员页面和普通用户页面"><a href="#区分管理员页面和普通用户页面" class="headerlink" title="区分管理员页面和普通用户页面"></a>区分管理员页面和普通用户页面</h3><ul>
<li>在管理员账号下</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">// 管理员</span><br> &#123;<br>   <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/&#x27;</span>,<br>   <span class="hljs-attr">access</span>: <span class="hljs-string">&#x27;canAdmin&#x27;</span>,<br>   <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;admin&#x27;</span>,<br>   <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;smile&#x27;</span>,<br>   <span class="hljs-attr">routes</span>: [<br>     <span class="hljs-comment">//用户信息页</span><br>     &#123;<br>       <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;用户信息&#x27;</span>,<br>       <span class="hljs-attr">access</span>: <span class="hljs-string">&#x27;canAdmin&#x27;</span>,<br>       <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;user&#x27;</span>,<br>       <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/user/list&#x27;</span>,<br>       <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./TableList/Admin/User&#x27;</span>,<br>     &#125;,<br>     <span class="hljs-comment">//接口信息页</span><br>     &#123;<br>       <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;接口信息&#x27;</span>,<br>       <span class="hljs-attr">access</span>: <span class="hljs-string">&#x27;canAdmin&#x27;</span>,<br>       <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;user&#x27;</span>,<br>       <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/interfaceInfo/list&#x27;</span>,<br>       <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./TableList/Admin/InterfaceInfo&#x27;</span>,<br>     &#125;,<br>     <span class="hljs-comment">// 接口分析页</span><br>     &#123;<br>       <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;接口分析&#x27;</span>,<br>       <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;user&#x27;</span>,<br>       <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/admin/interface_analysis&#x27;</span>,<br>       <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./TableList/Admin/InterfaceAnalysis&#x27;</span><br>     &#125;,<br><br>   ],<br> &#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="如上，新增了一个二级菜单：管理员页面"><a href="#如上，新增了一个二级菜单：管理员页面" class="headerlink" title="如上，新增了一个二级菜单：管理员页面"></a>如上，新增了一个二级菜单：管理员页面</h5></li>
<li><p>值得注意的是，这里管理员页面默认路由为 /，如果想实现访问 / 跳转至/welcome，则可以这样写：</p>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs ts"> <span class="hljs-comment">//欢迎页</span><br>&#123;<br>   <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/welcome&#x27;</span>,<br>   <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;welcome&#x27;</span>,<br>   <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;smile&#x27;</span>,<br>   <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./Welcome&#x27;</span>,<br>&#125;, <br>    <br>&#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/&#x27;</span>,<br>    <span class="hljs-attr">redirect</span>: <span class="hljs-string">&#x27;/welcome&#x27;</span>,<br>&#125;,<br>    <br> <span class="hljs-comment">// 管理员</span><br>  &#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/&#x27;</span>,<br>    <span class="hljs-attr">access</span>: <span class="hljs-string">&#x27;canAdmin&#x27;</span>,<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;admin&#x27;</span>,<br>   ....................<br>  &#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="如上，这里的重定向一定要写在管理员页面路由的前面，这样才能正常跳转至-welcome（2023-09-27午）"><a href="#如上，这里的重定向一定要写在管理员页面路由的前面，这样才能正常跳转至-welcome（2023-09-27午）" class="headerlink" title="如上，这里的重定向一定要写在管理员页面路由的前面，这样才能正常跳转至/welcome（2023/09/27午）"></a>如上，这里的重定向一定要写在管理员页面路由的前面，这样才能正常跳转至/welcome（2023/09/27午）</h5></li>
</ul>
<h3 id="简单的主页画面优化"><a href="#简单的主页画面优化" class="headerlink" title="简单的主页画面优化"></a>简单的主页画面优化</h3><ul>
<li>这个其实没什么好记录的，但是我最近一直在写 Vue，换成React后有点不适应，就先在此记录了</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs react">return (<br>    &lt;div&gt;<br>      &lt;Card<br>        hoverable<br>        style=&#123;&#123;<br>          width: 500, height: 150, margin: 20, marginLeft: 300,<br>          boxShadow: &#x27;0 2px 8px rgba(0, 0, 0, 0.15)&#x27;<br>        &#125;&#125;<br>      &gt;<br>      &lt;/Card&gt;<br><br>      &lt;List<br>        itemLayout=&quot;horizontal&quot;<br>        dataSource=&#123;list&#125;<br>        grid=&#123;&#123;gutter: 16, column: 5&#125;&#125;<br>        renderItem=&#123;(item) =&gt; (<br>          &lt;List.Item&gt;<br>            &lt;Card<br>              hoverable<br>              style=&#123;&#123;width: 240&#125;&#125;<br>              cover=&#123;&lt;img alt=&quot;example&quot; src=&quot;https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png&quot;/&gt;&#125;<br>            &gt;<br>              &lt;Card.Meta title=&#123;item.name&#125; description=&#123;item.description&#125;/&gt;<br>            &lt;/Card&gt;<br>          &lt;/List.Item&gt;<br>        )&#125;<br>      /&gt;<br>    &lt;/div&gt;<br>  )<br></code></pre></td></tr></table></figure>

<ul>
<li><p>React的语法真神奇，计划将默认的侧边栏改掉，改成顶部导航栏 </p>
</li>
<li><p>成功写好了接口广场首页，如图所示：</p>
</li>
</ul>
<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230927181914495.png" alt="image-20230927181914495"></p>
<ul>
<li><h5 id="在-umi-plugin-layout-layout-tsx下，可以修改侧边栏的属性（宽度、title、LOGO等）"><a href="#在-umi-plugin-layout-layout-tsx下，可以修改侧边栏的属性（宽度、title、LOGO等）" class="headerlink" title="在 .umi/plugin-layout/layout.tsx下，可以修改侧边栏的属性（宽度、title、LOGO等）"></a>在 .umi/plugin-layout/layout.tsx下，可以修改侧边栏的属性（宽度、title、LOGO等）</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs react">const userConfig = &#123;<br>  &quot;locale&quot;: true,<br>  &quot;navTheme&quot;: &quot;light&quot;,<br>  &quot;colorPrimary&quot;: &quot;#1890ff&quot;,<br>  &quot;layout&quot;: &quot;mix&quot;,<br>  &quot;contentWidth&quot;: &quot;Fluid&quot;,<br>  &quot;fixedHeader&quot;: false,<br>  &quot;fixSiderbar&quot;: true,<br>  &quot;colorWeak&quot;: false,<br>  &quot;title&quot;: &quot;Memory API接口开放平台&quot;,<br>  &quot;pwa&quot;: true,<br>  &quot;logo&quot;: &quot;https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg&quot;,<br>  &quot;iconfontUrl&quot;: &quot;&quot;,<br>  &quot;token&quot;: &#123;&#125;<br>&#125;;<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs react">&lt;ProLayout<br>     route=&#123;route&#125;<br>     location=&#123;location&#125;<br>     title=&#123;userConfig.title || &#x27;plugin-layout&#x27;&#125;<br>     navTheme=&quot;dark&quot;<br>     siderWidth=&#123;270&#125;<br>     ...........................<br></code></pre></td></tr></table></figure>

<ul>
<li>接口后台添加：<strong>接口封面图片字段（interfaceUrl）</strong> <strong>（2023/09/27晚）</strong></li>
</ul>
<h3 id="接口大厅页面优化"><a href="#接口大厅页面优化" class="headerlink" title="接口大厅页面优化"></a>接口大厅页面优化</h3><ul>
<li><p>前段时间参加了<strong>职业生涯规划大赛</strong>，<strong>参赛材料为</strong>：一份<code>生涯发展报告</code>（.pdf 文件） + 一份<code>生涯发展展示</code>（PPT）</p>
</li>
<li><p>本来还满心欢喜地盼着打到校赛，<strong>拿个实习 offer</strong> 啥的，结果昨晚通知群直接通知今晚7点开始<strong>院赛</strong>，我还没被评上。</p>
</li>
</ul>
<blockquote>
<p>奶奶的，一个院里六十来个参赛者，绝大部分都是 2022 级的，竟然还有好多大一的，大三大四的倒没几个</p>
<p>我这 PPT 也是花了心思的，我用文心一言大模型给我做了4份大学生职业生涯规划的PPT，然后取其精华，去其糟粕</p>
<p>凭借着我浅陋且贫瘠的审美he1设计灵感，选择了最合适的主题色，结合我自己的履历，拼凑出了一份完美的生涯发展展示</p>
<p>结果这份参赛材料竟然没有撑过第一轮筛选，连区区几个学弟学妹的履历都拼不过嘛。。。咱学校的比赛环境真的是一言难尽</p>
<p>他们究竟是什么样的可怕怪物，今晚7点见分晓，届时再到此处做评判</p>
</blockquote>
<ul>
<li>附上几张 <code>生涯发展展示 </code>的截图吧，自我感觉很满意的：（2023/11/09晚）</li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231109221856370.png" alt="image-20231109221856370"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231109221916491.png" alt="image-20231109221916491"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231109221907242.png" alt="image-20231109221907242"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231109221933453.png" alt="image-20231109221933453"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231109221937872.png" alt="image-20231109221937872"></p>
<ul>
<li>看到那几张<strong>个人项目展示</strong>的截图没？所以我才在这个栏目下<strong>唠闲话</strong>，<strong>hiahiahia</strong></li>
</ul>
<blockquote>
<p>我观摩回来了，一群妖魔鬼怪，什么几把职业规划大赛，<strong>吹牛逼大赛</strong></p>
<p>没有任何履历，不讲述自己的专业水平能力，张口闭口就是要做自动化工程师、软件测评师，我的专业水平还很欠缺，还需努力学习</p>
<p>我要做好大学生活的规划，有个家伙做规划，四个阶段，每个阶段10年，都特么规划到2049年了，关键还没细讲，一句话带过</p>
<p>全是写个指导老师就上去的：自我认知，职业评测，，职业规划，未来展望，他们的生涯发展展示跟一个模子里刻出来的一样</p>
<p>好多都是23级的，有着<strong>丰富的项目实战经验</strong>和<strong>优秀的专业水平能力</strong>，你特么上大学才两个月不到，这PPT抄的太不走心了吧</p>
<p>大学的这种比赛含金量真是让我一言难尽，还是把时间都放在个人提升上吧<strong>（2023/11/09晚）</strong></p>
</blockquote>
<h3 id="用户头像链接"><a href="#用户头像链接" class="headerlink" title="用户头像链接"></a>用户头像链接</h3><ul>
<li>哈哈哈哈，直接在 itab标签页 上找到我的头像链接：</li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231118221636206.png" alt="image-20231118221636206"></p>
<ul>
<li>我只能说相当好用：<strong>（2023/11/18晚）</strong></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231118221711543.png" alt="image-20231118221711543"></p>
<h3 id="优化-API-文档描述"><a href="#优化-API-文档描述" class="headerlink" title="优化 API 文档描述"></a>优化 API 文档描述</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs react">&#123;<br>  title: &#x27;类型&#x27;,<br>  dataIndex: &#x27;type&#x27;,<br>  key: &#x27;type&#x27;,<br>  render: (type: any) =&gt; (<br>    &lt;div&gt;<br>      &#123;<br>        type === &#x27;string&#x27; ? (<br>          &lt;Tag color=&#123;&quot;green&quot;&#125;&gt;String&lt;/Tag&gt;<br>        ) : type === &#x27;int&#x27; ? (<br>          &lt;Tag color=&#123;&quot;blue&quot;&#125;&gt;int&lt;/Tag&gt;<br>        ) : &#x27;hhh&#x27;<br>      &#125;<br>    &lt;/div&gt;<br>  ),<br>&#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li>核心功能已经完成了，做好 API 文档、在线接口调试、错误码参照和示例代码的页面优化<strong>（2023/11/22晚）</strong></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs react">&#123;<br>          label: &lt;&gt;&lt;FileTextFilled/&gt;API文档&lt;/&gt;,<br>          key: &#x27;1&#x27;,<br>          children: [<br>            &lt;CaretRightFilled style=&#123;&#123;color: &quot;green&quot;&#125;&#125;/&gt;,<br>            &lt;span style=&#123;&#123;fontSize: 16, fontWeight: &quot;bolder&quot;&#125;&#125;&gt;请求参数说明：&lt;/span&gt;,<br>            &lt;Table columns=&#123;requestParamsColumn&#125; dataSource=&#123;requestParamsInfo&#125;/&gt;,<br><br>            &lt;CaretRightFilled style=&#123;&#123;color: &quot;green&quot;&#125;&#125;/&gt;,<br>            &lt;span style=&#123;&#123;fontSize: 16, fontWeight: &quot;bolder&quot;&#125;&#125;&gt;响应参数说明：&lt;/span&gt;,<br>            &lt;Table columns=&#123;responseParamsColumn&#125; dataSource=&#123;responseParamsInfo&#125;/&gt;,<br><br>            &lt;CaretRightFilled style=&#123;&#123;color: &quot;green&quot;&#125;&#125;/&gt;,<br>            &lt;span style=&#123;&#123;fontSize: 16, fontWeight: &quot;bolder&quot;&#125;&#125;&gt;返回结果示例：&lt;/span&gt;,<br>          ]<br>        &#125;,<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231122204634581.png" alt="image-20231122204634581"></p>
<h3 id="代码块"><a href="#代码块" class="headerlink" title="代码块"></a>代码块</h3><ul>
<li>如何实现代码块显示？</li>
<li>这里简单演示一下使用 <code>ReactMonacoEditor</code> 组件实现代码块：</li>
<li>安装 <code>ReactMonacoEditor</code>：</li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs"><br></code></pre></td></tr></table></figure>

<ul>
<li>导入组件：</li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs"><br></code></pre></td></tr></table></figure>

<ul>
<li>编辑代码和简单的样式设置：</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">const</span> [code, setCode] = <span class="hljs-title function_">useState</span>(<span class="hljs-string">&#x27;&#123;\n&#x27;</span> +<br>    <span class="hljs-string">&#x27;    &quot;code&quot;: 0,\n&#x27;</span> +<br>    <span class="hljs-string">&#x27;    &quot;data&quot;: &quot;&#123;\\&quot;code\\&quot;:0,&#x27;</span> +<br>    <span class="hljs-string">&#x27;\\&quot;data\\&quot;:&#x27;</span> +<br>    <span class="hljs-string">&#x27;&#123;\\&quot;records\\&quot;:&#x27;</span> +<br>    &#123;\\<span class="hljs-string">&quot;category\\&quot;</span>:<span class="hljs-literal">null</span>,\\<span class="hljs-string">&quot;title\\&quot;</span>:\\<span class="hljs-string">&quot;Our Dynamic Sun\\&quot;</span>,\\<span class="hljs-string">&quot;url\\&quot;</span>:\\<span class="hljs-string">&quot;https://www-istp.gsfc.nasa.gov/exhibit/dyn5.gif\\&quot;</span>&#125;,&#123;\\<span class="hljs-string">&quot;category\\&quot;</span>:<span class="hljs-literal">null</span>,\\<span class="hljs-string">&quot;title\\&quot;</span>:\\<span class="hljs-string">&quot;Southern Sun Waterfront\\&quot;</span>,\\<span class="hljs-string">&quot;url\\&quot;</span>:\\<span class="hljs-string">&quot;https://wetu.com/Resources/1198/img_9539.jpg\\&quot;</span>&#125;,&#123;\\<span class="hljs-string">&quot;category\\&quot;</span>:<span class="hljs-literal">null</span>,\\<span class="hljs-string">&quot;title\\&quot;</span>:\\<span class="hljs-string">&quot;Clipart Panda - Free Clipart Images\\&quot;</span>,\\<span class="hljs-string">&quot;url\\&quot;</span>:\\<span class="hljs-string">&quot;http://images.clipartpanda.com/sun-clipart-4cbo5reoi.jpeg\\&quot;</span>&#125;,&#123;\\<span class="hljs-string">&quot;category\\&quot;</span>:<span class="hljs-literal">null</span>,\\<span class="hljs-string">&quot;title\\&quot;</span>:\\<span class="hljs-string">&quot;Sun, Moon, and Stars: Tradition for the Saints - OnePeterFive\\&quot;</span>,\\<span class="hljs-string">&quot;url\\&quot;</span>:\\<span class="hljs-string">&quot;https://onepeterfive.com/wp-content/uploads/2021/02/sunmoonstars.jpg\\&quot;</span>&#125;,&#123;\\<span class="hljs-string">&quot;category\\&quot;</span>:<span class="hljs-literal">null</span>,\\<span class="hljs-string">&quot;title\\&quot;</span>:\\<span class="hljs-string">&quot;53+ The Sun Clipart | ClipartLook\\&quot;</span>,\\<span class="hljs-string">&quot;url\\&quot;</span>:\\<span class="hljs-string">&quot;http://img.clipartlook.com/sun-clipart-png-clipart-panda-free-clipart-imagestop-30-png-the-sun-clip-art-illustrations-the-sun-clipart-1024_1024.jpg\\&quot;</span>&#125;],\\<span class="hljs-string">&quot;total\\&quot;</span>:<span class="hljs-number">0</span>,\\<span class="hljs-string">&quot;size\\&quot;</span>:<span class="hljs-number">1</span>,\\<span class="hljs-string">&quot;current\\&quot;</span>:<span class="hljs-number">5</span>,\\<span class="hljs-string">&quot;orders\\&quot;</span>:[],\\<span class="hljs-string">&quot;optimizeCountSql\\&quot;</span>:<span class="hljs-literal">true</span>,\\<span class="hljs-string">&quot;searchCount\\&quot;</span>:<span class="hljs-literal">true</span>,\\<span class="hljs-string">&quot;countId\\&quot;</span>:<span class="hljs-literal">null</span>,\\<span class="hljs-string">&quot;maxLimit\\&quot;</span>:<span class="hljs-literal">null</span>,\\<span class="hljs-string">&quot;pages\\&quot;</span>:<span class="hljs-number">0</span>&#125;,\\<span class="hljs-string">&quot;message\\&quot;</span>:\\<span class="hljs-string">&quot;ok\\&quot;</span>&#125;<span class="hljs-string">&quot;,\n&#x27; +</span><br><span class="hljs-string">    &#x27;    &quot;</span>message<span class="hljs-string">&quot;: &quot;</span>ok<span class="hljs-string">&quot;\n&#x27; +</span><br><span class="hljs-string">    &#x27;&#125;&#x27;); // 初始代码内容</span><br><span class="hljs-string"></span><br><span class="hljs-string">  const options = &#123;</span><br><span class="hljs-string">    // 编辑器选项设置</span><br><span class="hljs-string">    selectOnLineNumbers: true,</span><br><span class="hljs-string">    roundedSelection: false,</span><br><span class="hljs-string">    scrollBeyondLastLine: false,</span><br><span class="hljs-string">    roundedEdges: false,</span><br><span class="hljs-string">    handleMouseWheel: true,</span><br><span class="hljs-string">  &#125;;</span><br></code></pre></td></tr></table></figure>

<ul>
<li>使用 <code>ReactMonacoEditor</code> 组件：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs react">&lt;ReactMonacoEditor<br>           language=&quot;javascript&quot; // 指定代码语言<br>           theme=&quot;vs-dark&quot; // 指定主题风格<br>           options=&#123;options&#125;<br>           height=&quot;200&quot;<br>           value=&#123;code&#125; // 设置初始代码内容<br>         /&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><p>注意：这里不指定 <code>height</code> 的话，我这里显示该组件高度为0，样式有点问题，还得显示指定高度（<strong>日后实现 height 自适应高度</strong>） </p>
</li>
<li><h5 id="效果如下："><a href="#效果如下：" class="headerlink" title="效果如下："></a>效果如下：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231125213957583.png" alt="image-20231125213957583"></p>
<h3 id="开发者文档"><a href="#开发者文档" class="headerlink" title="开发者文档"></a>开发者文档</h3><ul>
<li>拖欠很久的想法了，为我的项目做一个开发者文档：<strong>（2023/11/25晚）</strong></li>
</ul>
<blockquote>
<p>参考实现：<a target="_blank" rel="noopener" href="https://api.qimuu.icu/">欢迎 - Qi-API 接口开放平台 (qimuu.icu)</a></p>
</blockquote>
<ul>
<li>使用 Vuepress 快速建站，并配置第三方主题：了解了整个 demo 文档的架构之后，着手修改，开启自定义配置：</li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231125173310088.png" alt="image-20231125173310088"></p>
<h3 id="区别各个接口调用页面显示"><a href="#区别各个接口调用页面显示" class="headerlink" title="区别各个接口调用页面显示"></a>区别各个接口调用页面显示</h3><ul>
<li><p>花费了将近半个月的时间，总算将基于 Vuepress 搭建文档站点的思路摸清楚了 <strong>（2023/12/07晚）</strong></p>
</li>
<li><p>详细的搭建和部署流程都记录在《前端框架踩坑与技巧总结：Ant Design、Vite，助您无忧编程》一文中，如有需求可跳转至该文章下了解学习~</p>
</li>
<li><p>随着接口的增多，每个接口对应的 API 文档、请求参数配置、响应码等都各不相同，我们需要根据不同的接口，显示不同的页面</p>
</li>
<li><p>这就需要我们在外部文件编写页面，并在接口调用页面导入外部页面组件了：</p>
</li>
<li><p>如下，编写页面组件 <code>RandomPoem</code>：</p>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 接口分析</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@constructor</span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">PageContainer</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@ant-design/pro-components&quot;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">CaretRightFilled</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@ant-design/icons&quot;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Form</span>, message, <span class="hljs-title class_">Input</span>, <span class="hljs-title class_">Tag</span>, <span class="hljs-title class_">Table</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;antd&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">ColumnsType</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;antd/es/table&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, &#123;useState&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;react&quot;</span>;<br><span class="hljs-keyword">import</span> initialState <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@@/plugin-initialState/@@initialState&quot;</span>;<br><span class="hljs-keyword">import</span> &#123;invokeInterfaceInfoUsingPOST&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/services/memory-api/interfaceInfoController&quot;</span>;<br><span class="hljs-keyword">import</span> &#123;useParams&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@@/exports&quot;</span>;<br><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">RandomPoem</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span> = <span class="hljs-function">() =&gt;</span> &#123;<br>.....................<br><br>  <span class="hljs-keyword">return</span> (<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">PageContainer</span>&gt;</span></span><br><span class="language-xml">      .....................</span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">PageContainer</span>&gt;</span></span><br>  );<br>&#125;;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">RandomPoem</span>;<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231207235417783.png" alt="image-20231207235417783"></p>
<ul>
<li>在需要引入该组件的页面导入该组件，并引入：</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">import</span> <span class="hljs-title class_">RandomPoem</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/pages/TableList/InterfaceInfo/RandomPoem&quot;</span>;<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231207235457463.png" alt="image-20231207235457463"></p>
<ul>
<li>具体的思路是：根据当前接口（根据当前接口对应的 url 值，直接匹配展示对应的页面组件），简单的代码演示如下：<strong>（2023/12/08晚）</strong></li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">const</span> <span class="hljs-title function_">loadData</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-keyword">if</span> (!params.<span class="hljs-property">id</span>) &#123;<br>    message.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;参数不存在&#x27;</span>);<br>    <span class="hljs-keyword">return</span>;<br>  &#125;<br>  <span class="hljs-title function_">setLoading</span>(<span class="hljs-literal">true</span>);<br><br>  <span class="hljs-keyword">try</span> &#123;<br>    <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-title function_">getInterfaceInfoByIdUsingGET</span>(&#123;<br>      <span class="hljs-attr">id</span>: <span class="hljs-title class_">Number</span>(params.<span class="hljs-property">id</span>),<br>    &#125;);<br>    <span class="hljs-title function_">setData</span>(res.<span class="hljs-property">data</span>);<br>  &#125; <span class="hljs-keyword">catch</span> (<span class="hljs-attr">error</span>: <span class="hljs-built_in">any</span>) &#123;<br>    message.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;请求失败，&#x27;</span> + error.<span class="hljs-property">message</span>);<br>  &#125;<br>  <span class="hljs-title function_">setLoading</span>(<span class="hljs-literal">false</span>);<br>&#125;;<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs react">&lt;div&gt;<br>	&lt;span&gt;&#123;data ? data.url : &quot;空&quot;&#125;&lt;/span&gt;<br>	&#123;data ? &#x27;好好好&#x27; + data.url : &quot;空&quot;&#125;<br>&lt;/div&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><p>如上，用<strong>三元表达式</strong>来展示接口的 <code>url</code> 值</p>
</li>
<li><p>成功实现：</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs react">&lt;div&gt;<br>    &#123;data &amp;&amp; data.url === &#x27;http://localhost:8090/api/words/one/random&#x27; ? (<br>    &lt;RandomPoem/&gt;<br>    ) : data &amp;&amp; data.url === &#x27;http://localhost:8090/api/wallpaper/list/page/vo&#x27; ? (<br>    &lt;RandomPicture/&gt;<br>    ) : data &amp;&amp; data.url === &#x27;http://localhost:8090/api/name/user&#x27; ? (<br>    &lt;NameRepeat/&gt;<br>    ) : &lt;div&gt;No component to render&lt;/div&gt;<br>    &#125;<br>&lt;/div&gt;<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231209002507861.png" alt="image-20231209002507861"></p>
<ul>
<li>基本完成了各个接口的调用页面区分：<strong>（2023/12/09晚）</strong></li>
</ul>
<h3 id="自定义-Starter"><a href="#自定义-Starter" class="headerlink" title="自定义 Starter"></a>自定义 Starter</h3><ul>
<li>之前我们开发过 memory-client-sdk 接口调用 SDK，但是不够完善，今天在保持原有功能不变的情况下，重构该 SDK：<strong>（2024/01/08晚）</strong></li>
</ul>
<h4 id="新建-Spring-Boot-项目"><a href="#新建-Spring-Boot-项目" class="headerlink" title="新建 Spring Boot 项目"></a>新建 Spring Boot 项目</h4><ul>
<li>新建 Spring Boot 项目 <code>memory-client-spring-boot-starter</code>:</li>
</ul>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>com.memory<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>memory-client-spring-boot-starter<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">version</span>&gt;</span>0.0.1<span class="hljs-tag">&lt;/<span class="hljs-name">version</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="依赖配置"><a href="#依赖配置" class="headerlink" title="依赖配置"></a>依赖配置</h4><ul>
<li>在 <code>pom.xml</code> 文件下，新增如下依赖：</li>
</ul>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">dependency</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>org.springframework.boot<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span>s<br>    <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>spring-boot-configuration-processor<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">optional</span>&gt;</span>true<span class="hljs-tag">&lt;/<span class="hljs-name">optional</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">dependency</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li><code>spring-boot-configuration-processor</code> 在自定义 Spring Boot Starter 时的作用主要是生成配置元数据、提供代码提示和自动补全，以及确保配置属性的正确解析：<ul>
<li><strong>生成配置元数据</strong>：该依赖会根据在项目中定义的带有 <code>@ConfigurationProperties</code> 注解的类，在 <code>META-INF</code> 文件夹下生成 <code>spring-configuration-metadata.json</code> 文件。这个文件是一种元数据文件，其中包含了关于配置属性的信息，如属性名称、类型、默认值等。这些信息可以用于在IDE中编辑配置文件时提供代码提示和自动补全等功能。</li>
<li><strong>提供代码提示和自动补全</strong>：当你在IDE中编辑配置文件时，由于 <code>spring-boot-configuration-processor</code> 生成的元数据，IDE 会提供代码提示和自动补全功能。这使得在编写配置文件时更加方便，降低了因拼写错误或配置项不正确而导致的错误。</li>
<li><strong>确保配置属性的正确解析</strong>：<code>spring-boot-configuration-processor</code> 在编译时会对带有 <code>@ConfigurationProperties</code> 注解的类进行处理，确保配置属性能够被正确地解析和绑定。这对于自定义的 Starter 来说非常重要，因为正确的解析和绑定配置属性是保证 Starter 功能正常的前提。</li>
</ul>
</li>
<li>注意，新建的 Spring Boot 项目的<code>pom.xml</code>文件下，都会有<code>build标签</code>，记得移除 👇：</li>
</ul>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- 移除该内容 --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">build</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">plugins</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">plugin</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>org.springframework.boot<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>spring-boot-maven-plugin<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">configuration</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">excludes</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">exclude</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>org.projectlombok<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>lombok<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br>                        <span class="hljs-tag">&lt;/<span class="hljs-name">exclude</span>&gt;</span><br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">excludes</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">configuration</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">plugin</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">plugin</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>org.apache.maven.plugins<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>maven-compiler-plugin<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">configuration</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">source</span>&gt;</span>8<span class="hljs-tag">&lt;/<span class="hljs-name">source</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">target</span>&gt;</span>8<span class="hljs-tag">&lt;/<span class="hljs-name">target</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">configuration</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">plugin</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">plugins</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">build</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="新增配置文件类"><a href="#新增配置文件类" class="headerlink" title="新增配置文件类"></a>新增配置文件类</h4><ul>
<li>在 properties 目录下，新增配置文件类 MemoryClientProperties：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@ConfigurationProperties(prefix = &quot;memory.client&quot;)</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MemoryClientProperties</span> &#123;<br>    <span class="hljs-keyword">private</span> String accessKey;<br>    <span class="hljs-keyword">private</span> String secretKey;<br><br>    <span class="hljs-comment">// 省略 Getter()、Setter() 方法</span><br>    ..............................<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><code>@ConfigurationProperties</code>注解能够自动获取 application.properties 配置文件中前缀为 <code>spring.girlfriend</code> 节点下 <code>message</code>属性的内容</li>
</ul>
<h4 id="新增功能接口"><a href="#新增功能接口" class="headerlink" title="新增功能接口"></a>新增功能接口</h4><ul>
<li>在 service 目录下，新增功能接口 MemoryClientService，用来实现对各个接口发起调用：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Service</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MemoryClientService</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 获取随机名言</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> words 名言类型</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 随机名言</span><br><span class="hljs-comment">     */</span><br>    String <span class="hljs-title function_">getRandomWord</span><span class="hljs-params">(Words words)</span>;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 获取随机壁纸</span><br><span class="hljs-comment">     *</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param</span> picture 壁纸类型</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@return</span> 壁纸名言</span><br><span class="hljs-comment">     */</span><br>    String <span class="hljs-title function_">getPictureListByType</span><span class="hljs-params">(Picture picture)</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="新增功能接口实现类"><a href="#新增功能接口实现类" class="headerlink" title="新增功能接口实现类"></a>新增功能接口实现类</h4><ul>
<li>在 service/impl 目录下，新增功能接口实现类 MemoryClientServiceImpl，用来实现对各个接口发起调用：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">/**</span><br><span class="hljs-comment">   * 获取随机名言</span><br><span class="hljs-comment">   *</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@param</span> words 名言类型</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@return</span> 随机名言</span><br><span class="hljs-comment">   */</span><br>  <span class="hljs-meta">@Override</span><br>  <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getRandomWord</span><span class="hljs-params">(Words words)</span> &#123;<br>      <span class="hljs-type">String</span> <span class="hljs-variable">json</span> <span class="hljs-operator">=</span> JSONUtil.toJsonStr(words);<br>      <span class="hljs-keyword">return</span> HttpRequest.post(GATEWAY_HOST + <span class="hljs-string">&quot;/api/words/one/random&quot;</span>)<br>              .addHeaders(getHeaderMap(json))<br>              .body(json)<br>              .execute()<br>              .body();<br>  &#125;<br><br>  <span class="hljs-comment">/**</span><br><span class="hljs-comment">   * 获取随机壁纸</span><br><span class="hljs-comment">   *</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@param</span> picture 壁纸类型</span><br><span class="hljs-comment">   * <span class="hljs-doctag">@return</span> 壁纸名言</span><br><span class="hljs-comment">   */</span><br>  <span class="hljs-meta">@Override</span><br>  <span class="hljs-keyword">public</span> String <span class="hljs-title function_">getPictureListByType</span><span class="hljs-params">(Picture picture)</span> &#123;<br>      <span class="hljs-type">String</span> <span class="hljs-variable">json</span> <span class="hljs-operator">=</span> JSONUtil.toJsonStr(picture);<br>      <span class="hljs-keyword">return</span> HttpRequest.post(GATEWAY_HOST + <span class="hljs-string">&quot;/api/wallpaper/list/page/vo&quot;</span>)<br>              .addHeaders(getHeaderMap(json))<br>              .body(json)<br>              .execute()<br>              .body();<br>  &#125;<br>  <br>  <span class="hljs-comment">// 省略其他接口调用方法</span><br>  .................................<br></code></pre></td></tr></table></figure>

<h4 id="新增自动配置类"><a href="#新增自动配置类" class="headerlink" title="新增自动配置类"></a>新增自动配置类</h4><ul>
<li>新增自动配置类 MemoryClientAutoConfiguration，实现自动化配置功能：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Configuration</span><br><span class="hljs-meta">@ConditionalOnClass(MemoryClientService.class)</span><br><span class="hljs-meta">@EnableConfigurationProperties(MemoryClientProperties.class)</span><br><span class="hljs-keyword">class</span> <span class="hljs-title class_">MemoryClientAutoConfiguration</span> &#123;<br><br>    <span class="hljs-meta">@Bean</span><br>    <span class="hljs-meta">@ConditionalOnMissingBean</span><br>    <span class="hljs-keyword">public</span> MemoryClientService <span class="hljs-title function_">memoryClientService</span><span class="hljs-params">()</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">MemoryClientServiceImpl</span>();<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>简单介绍下这几个注解的作用：<ul>
<li><code>@Configuration</code>: 标注类为一个配置类，让 spring 去扫描它；</li>
<li>@ConditionalOnClass<code>：条件注解，只有在 </code>classpath<code> 路径下存在指定 class 文件时，才会实例化 Bean</code> </li>
<li>@EnableConfigurationProperties<code>：使指定配置类生效；</code></li>
<li>@Bean<code>: 创建一个实例类注入到 Spring Ioc 容器中；</code></li>
<li>@ConditionalOnMissingBean`：条件注解，意思是，仅当 Ioc 容器不存在指定类型的 Bean 时，才会创建 Bean。</li>
</ul>
</li>
</ul>
<h4 id="配置自动装配类路径"><a href="#配置自动装配类路径" class="headerlink" title="配置自动装配类路径"></a>配置自动装配类路径</h4><ul>
<li><p>配置自动装配的类的路径，这样 Spring Boot 会在启动时，自动会去查找指定文件 <code>/META-INF/spring.factories</code>，若有，就会根据配置的类的全路径去自动化配置：</p>
</li>
<li><p>在 Spring Boot 2.x 中，在 resource/META-INF/spring.factories 文件下，添加如下配置来标记自动配置类：</p>
</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs stylus">org<span class="hljs-selector-class">.springframework</span><span class="hljs-selector-class">.boot</span><span class="hljs-selector-class">.autoconfigure</span>.EnableAutoConfiguration=com<span class="hljs-selector-class">.example</span><span class="hljs-selector-class">.starter3</span>.NameAutoConfiguration<br></code></pre></td></tr></table></figure>

<ul>
<li>而在 Spring Boot 3.x 中，在 resource/META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports 文件下，添加如下配置：</li>
</ul>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs stylus">com<span class="hljs-selector-class">.example</span><span class="hljs-selector-class">.starter3</span>.NameAutoConfiguration<br></code></pre></td></tr></table></figure>

<h4 id="打包"><a href="#打包" class="headerlink" title="打包"></a>打包</h4><ul>
<li>是将 <code>girl-friend-spring-boot-starter</code> 打成 <code>jar</code> 包，放到本地的 <code>maven</code> 仓库中去在项目根路径下执行 maven 命令：</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">mvn clean install<br></code></pre></td></tr></table></figure>

<h4 id="引用自定义-Starter"><a href="#引用自定义-Starter" class="headerlink" title="引用自定义 Starter"></a>引用自定义 Starter</h4><ul>
<li>在需要引入 <code>memory-client-spring-boot-starter</code> 接口调用功能的 <code>Spring Boot 项目</code>中的 <code>pom.xml</code>文件中，导入依赖：</li>
</ul>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">dependency</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>com.memory<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>memory-client-sdk<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">version</span>&gt;</span>0.0.1<span class="hljs-tag">&lt;/<span class="hljs-name">version</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">dependency</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li>在<code>resouce</code>目录下的<code>application.yaml</code>配置文件下，添加如下配置：</li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">memory-api:</span><br>  <span class="hljs-attr">client:</span><br>    <span class="hljs-attr">access-key:</span> <span class="hljs-string">memory</span><br>    <span class="hljs-attr">secret-key:</span> <span class="hljs-number">12345678</span><br></code></pre></td></tr></table></figure>

<ul>
<li>注入 <code>MemoryClientService</code>，可以对任一接口服务发起调用：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Resource</span><br><span class="hljs-keyword">private</span> MemoryClientService memoryClientService;<br><br> <span class="hljs-comment">// 随机名言</span><br>com.memory.client.model.<span class="hljs-type">Words</span> <span class="hljs-variable">words</span> <span class="hljs-operator">=</span> gson.fromJson(userRequestParams, com.memory.client.model.Words.class);<br>result = memoryClientService.getRandomWord(words);<br><br><span class="hljs-comment">// 随机壁纸</span><br>com.memory.client.model.<span class="hljs-type">Picture</span> <span class="hljs-variable">picture</span> <span class="hljs-operator">=</span> gson.fromJson(userRequestParams, com.memory.client.model.Picture.class);<br>result = memoryClientService.getPictureListByType(picture);<br><br>............................<br></code></pre></td></tr></table></figure>

<h3 id="随机壁纸优化"><a href="#随机壁纸优化" class="headerlink" title="随机壁纸优化"></a>随机壁纸优化</h3><ul>
<li>推荐该网站：</li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240116181424321.png" alt="image-20240116181424321"></p>
<ul>
<li>使用 Jsoup 库爬取该网页：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs java"> <span class="hljs-comment">// 非空条件，转码</span><br><span class="hljs-keyword">if</span> (StringUtils.isNotBlank(category)) &#123;<br>    category = URLEncoder.encode(category, <span class="hljs-string">&quot;UTF-8&quot;</span>);<br>&#125;<br><br><span class="hljs-type">Random</span> <span class="hljs-variable">random</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Random</span>();<br><span class="hljs-type">int</span> <span class="hljs-variable">randomPage</span> <span class="hljs-operator">=</span> random.nextInt(<span class="hljs-number">5</span>) + <span class="hljs-number">1</span>;<br><span class="hljs-type">String</span> <span class="hljs-variable">url</span> <span class="hljs-operator">=</span> String.format(<span class="hljs-string">&quot;https://www.vcg.com/creative-image/%s/?page=%d&quot;</span>, category, randomPage);<br><br><span class="hljs-type">Connection</span> <span class="hljs-variable">connect</span> <span class="hljs-operator">=</span> Jsoup.connect(url);<br><span class="hljs-type">Document</span> <span class="hljs-variable">doc</span> <span class="hljs-operator">=</span> connect.get();<br><span class="hljs-type">Elements</span> <span class="hljs-variable">galleryItem</span>  <span class="hljs-operator">=</span> Objects.requireNonNull(doc.getElementById(<span class="hljs-string">&quot;imageContent&quot;</span>))<br>    .select(<span class="hljs-string">&quot;.gallery_inner&quot;</span>)<br>    .select(<span class="hljs-string">&quot;.galleryItem&quot;</span>);<br></code></pre></td></tr></table></figure>

<ul>
<li>从结果中随机选取五条结果：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 随机选择五个标签</span><br>    List&lt;Element&gt; selectedItems = galleryItem.subList(<span class="hljs-number">0</span>, <span class="hljs-number">5</span>);<br>    <span class="hljs-comment">// 打印选中的标签</span><br>    <span class="hljs-keyword">for</span> (Element item : selectedItems) &#123;<br>     	<span class="hljs-type">Elements</span> <span class="hljs-variable">img</span> <span class="hljs-operator">=</span> item.select(<span class="hljs-string">&quot;&gt; a &gt; img&quot;</span>);<br>  <span class="hljs-type">String</span> <span class="hljs-variable">src</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;https:&quot;</span> + img.attr(<span class="hljs-string">&quot;data-src&quot;</span>);<br> <span class="hljs-type">String</span> <span class="hljs-variable">title</span> <span class="hljs-operator">=</span> img.attr(<span class="hljs-string">&quot;title&quot;</span>);<br><br> <span class="hljs-type">Picture</span> <span class="hljs-variable">picture</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Picture</span>();<br> picture.setCategory(category);<br> picture.setTitle(title);<br> picture.setUrl(src);<br><br> pictureList.add(picture);<br>    &#125;<br></code></pre></td></tr></table></figure>

<h4 id="优化方向"><a href="#优化方向" class="headerlink" title="优化方向"></a>优化方向</h4><ul>
<li><p>看了别人的接口统计计费功能，很复杂呵：<strong>（2023/12/27早）</strong></p>
<ul>
<li>限制接口调用次数，支持购买接口调用次数</li>
<li>设计虚拟货币，比如说积分，开设相应的积分购买活动，用户发起支付即可获取对应积分，积分可用来换取接口调用次数</li>
<li>这就需要在用户管理中，增加积分管理功能</li>
<li>开设了相应的积分购买活动，还需要在管理员功能中，增加积分购买活动的管理功能，可支持活动的发布和下线</li>
<li>用户购买积分，生成一份订单，需要设计对应的订单管理功能</li>
<li>我时间精力有限，暂时不做这些复杂的功能，不过接口调用次数限制是很有必要的，可以简单实现每日获取50次接口调用的功能</li>
<li>暂时就这些想法</li>
</ul>
</li>
<li><p>接口开放平台优化：</p>
<ul>
<li>个人中心：个人信息设置、我的积分、签到免费领取、提供开发者 SDK 下载，快速接入 API 接口</li>
<li>接口调用：限制接口调用次数，做好提示</li>
</ul>
</li>
<li><p>统计分析功能：</p>
<ul>
<li>调用次数分析：</li>
<li>响应时间分析：</li>
<li>用户行为分析：</li>
<li>接口调用来源分析：</li>
<li>趋势分析：</li>
</ul>
</li>
<li><p>完善用户信息管理，完善接口信息管理，完善接口服务</p>
</li>
</ul>
<h3 id="亮点"><a href="#亮点" class="headerlink" title="亮点"></a>亮点</h3><h2 id="踩坑记录"><a href="#踩坑记录" class="headerlink" title="踩坑记录"></a>踩坑记录</h2><h3 id="mapper-注入为-null"><a href="#mapper-注入为-null" class="headerlink" title="mapper 注入为 null"></a>mapper 注入为 null</h3><ul>
<li>半个月前，我新增了一条接口：<strong>随机返回一条名言</strong></li>
<li>当时是这样调用接口的：</li>
</ul>
<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230921132949167.png" alt="image-20230921132949167"></p>
<ul>
<li>当请求转发到 GateWay 网关时，<strong>接受到的参数就变成乱码</strong>了（可惜截不到原图了，这是现在的调用效果）：</li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230921133040857.png" alt="image-20230921133040857"></p>
<ul>
<li>这就是 <strong>GateWay 网关接收中文参数变成乱码</strong>的问题了，关于这个我尝试了各种配置去解决，<strong>但均无果</strong></li>
<li>把我搜集到的这些：通过配置来<strong>解决中文乱码的解决方案</strong>（虽然没什么效果），简单的贴出来吧，有机会再研究：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 设置请求编码</span><br>       <span class="hljs-type">MediaType</span> <span class="hljs-variable">requestContentType</span> <span class="hljs-operator">=</span> requestHeaders.getContentType();<br>       <span class="hljs-keyword">if</span> (requestContentType != <span class="hljs-literal">null</span> &amp;&amp; requestContentType.getCharset() == <span class="hljs-literal">null</span>) &#123;<br>           requestHeaders.setContentType(<span class="hljs-keyword">new</span> <span class="hljs-title class_">MediaType</span>(requestContentType.getType(), requestContentType.getSubtype(), Charset.forName(<span class="hljs-string">&quot;UTF-8&quot;</span>)));<br>       &#125;<br><br>       <span class="hljs-comment">// 设置响应编码</span><br>       <span class="hljs-type">MediaType</span> <span class="hljs-variable">responseContentType</span> <span class="hljs-operator">=</span> responseHeaders.getContentType();<br>       <span class="hljs-keyword">if</span> (responseContentType != <span class="hljs-literal">null</span> &amp;&amp; responseContentType.getCharset() == <span class="hljs-literal">null</span>) &#123;<br>           responseHeaders.setContentType(<span class="hljs-keyword">new</span> <span class="hljs-title class_">MediaType</span>(responseContentType.getType(), responseContentType.getSubtype(), Charset.forName(<span class="hljs-string">&quot;UTF-8&quot;</span>)));<br>       &#125;        <br></code></pre></td></tr></table></figure>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">spring:</span><br>    <span class="hljs-attr">main:</span><br>      <span class="hljs-attr">web-application-type:</span> <span class="hljs-string">reactive</span><br></code></pre></td></tr></table></figure>

<ul>
<li>于是我就想，我为什么非得传中文呢？<strong>写个枚举类，把名言类型枚举，改为传递对应的整数</strong>不就行了嘛</li>
<li>于是就有了现在的解决方案，详情可见上文中的 <strong>后续优化 -&gt; 随机显示一条名言</strong>一栏 <strong>（2023/09/21）</strong></li>
</ul>
<h2 id="相关知识"><a href="#相关知识" class="headerlink" title="相关知识"></a>相关知识</h2><ul>
<li><h5 id="Dubbo、Nacos依赖包的导入以及相关服务的正确使用"><a href="#Dubbo、Nacos依赖包的导入以及相关服务的正确使用" class="headerlink" title="Dubbo、Nacos依赖包的导入以及相关服务的正确使用"></a>Dubbo、Nacos依赖包的导入以及相关服务的正确使用</h5></li>
<li><h5 id="Maven实现抽取公共服务（2023-08-24午）"><a href="#Maven实现抽取公共服务（2023-08-24午）" class="headerlink" title="Maven实现抽取公共服务（2023/08/24午）"></a>Maven实现抽取公共服务（2023/08/24午）</h5></li>
</ul>
<h2 id="TODO"><a href="#TODO" class="headerlink" title="TODO"></a>TODO</h2><ul>
<li><h5 id="注册页面的开发"><a href="#注册页面的开发" class="headerlink" title="注册页面的开发"></a>注册页面的开发</h5></li>
<li><h5 id="接口信息增、删、改、查的后端业务逻辑，待完善"><a href="#接口信息增、删、改、查的后端业务逻辑，待完善" class="headerlink" title="接口信息增、删、改、查的后端业务逻辑，待完善"></a>接口信息增、删、改、查的后端业务逻辑，待完善</h5></li>
<li><h5 id="前端表格信息的增、删、改，待完善（√）"><a href="#前端表格信息的增、删、改，待完善（√）" class="headerlink" title="前端表格信息的增、删、改，待完善（√）"></a>前端表格信息的增、删、改，待完善（√）</h5></li>
<li><h5 id="增、删、改接口信息后，不能立刻刷新，老问题"><a href="#增、删、改接口信息后，不能立刻刷新，老问题" class="headerlink" title="增、删、改接口信息后，不能立刻刷新，老问题"></a>增、删、改接口信息后，不能立刻刷新，老问题</h5></li>
<li><h5 id="接口信息的删除，没有弹窗告警"><a href="#接口信息的删除，没有弹窗告警" class="headerlink" title="接口信息的删除，没有弹窗告警"></a>接口信息的删除，没有弹窗告警</h5></li>
<li><h5 id="前端操作不当，没有得到清楚的提示"><a href="#前端操作不当，没有得到清楚的提示" class="headerlink" title="前端操作不当，没有得到清楚的提示"></a>前端操作不当，没有得到清楚的提示</h5></li>
<li><h5 id="未登录用户可以选择登录，目前还没有添加这个按钮"><a href="#未登录用户可以选择登录，目前还没有添加这个按钮" class="headerlink" title="未登录用户可以选择登录，目前还没有添加这个按钮"></a>未登录用户可以选择登录，目前还没有添加这个按钮</h5></li>
<li><h5 id="SDK-使用文档、开发文档、页面布局、丰富接口功能（类型）、明确接口的调用（参数）"><a href="#SDK-使用文档、开发文档、页面布局、丰富接口功能（类型）、明确接口的调用（参数）" class="headerlink" title="SDK 使用文档、开发文档、页面布局、丰富接口功能（类型）、明确接口的调用（参数）"></a>SDK 使用文档、开发文档、页面布局、丰富接口功能（类型）、明确接口的调用（参数）</h5></li>
</ul>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/deng-2022/blog_2/categories/Redis/" class="category-chain-item">Redis</a>
  
  
    <span>></span>
    
  <a href="/deng-2022/blog_2/categories/Redis/%E9%A1%B9%E7%9B%AE/" class="category-chain-item">项目</a>
  
  
    <span>></span>
    
  <a href="/deng-2022/blog_2/categories/Redis/%E9%A1%B9%E7%9B%AE/%E5%BC%80%E5%8F%91%E7%BB%8F%E9%AA%8C/" class="category-chain-item">开发经验</a>
  
  

  

  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/deng-2022/blog_2/tags/%E9%A1%B9%E7%9B%AE/">#项目</a>
      
        <a href="/deng-2022/blog_2/tags/%E5%BC%80%E5%8F%91%E7%BB%8F%E9%AA%8C/">#开发经验</a>
      
        <a href="/deng-2022/blog_2/tags/Redis/">#Redis</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>MemoryAPI 忆汇廊-开发文档</div>
      <div>https://atomgit.com/deng-2022/blog_2/2023/07/11/MemoryAPI 忆汇廊-开发文档/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>Memory</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2023年7月11日</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>更新于</div>
          <div>2024年2月27日</div>
        </div>
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/deng-2022/blog_2/2023/07/15/%E6%B7%B1%E5%BA%A6%E8%A7%A3%E6%9E%90Web%E5%BC%80%E5%8F%91%E4%B8%AD%E7%9A%84%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98/" title="深度解析Web开发中的跨域问题">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">深度解析Web开发中的跨域问题</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/deng-2022/blog_2/2023/07/11/Docker%20%E5%85%A5%E9%97%A8%E4%B8%8E%E5%AE%9E%E8%B7%B5%EF%BC%9A%E5%BF%AB%E9%80%9F%E6%89%93%E9%80%A0%E9%AB%98%E6%95%88%E7%BD%91%E7%AB%99%E9%83%A8%E7%BD%B2%E7%8E%AF%E5%A2%83/" title="Docker入门与实践：快速打造高效网站部署环境">
                        <span class="hidden-mobile">Docker入门与实践：快速打造高效网站部署环境</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
  
  
    <article id="comments">
      

    </article>
  


          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header">
    <i class="iconfont icon-list"></i>
    <span>目录</span>
  </p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://hexo.fluid-dev.com/docs/guide/" target="_blank" rel="nofollow noopener"> <span>Memory | 个人文档站点</span> </a>
<i class="iconfont icon-love"></i> <a href="https://hexo.fluid-dev.com/docs/guide/" target="_blank" rel="nofollow noopener"> <span>配置指南 | Hexo Fluid 用户手册</span> </a>   
    </div>
  
  
    <div class="statistics">
  
  

  
    
      <span id="leancloud-site-pv-container" style="display: none">
        总访问量 
        <span id="leancloud-site-pv"></span>
         次
      </span>
    
    
      <span id="leancloud-site-uv-container" style="display: none">
        总访客数 
        <span id="leancloud-site-uv"></span>
         人
      </span>
    
    

  
</div>

  
  
    <!-- 备案信息 ICP for China -->
    <div class="beian">
  <span>
    <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
      京ICP证123456号
    </a>
  </span>
  
    
      <span>
        <a
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
          rel="nofollow noopener"
          class="beian-police"
          target="_blank"
        >
          
            <span style="visibility: hidden; width: 0">|</span>
            <img src="/deng-2022/blog_2/img/police_beian.png" alt="police-icon"/>
          
          <span>京公网安备12345678号</span>
        </a>
      </span>
    
  
</div>

  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/deng-2022/blog_2/js/events.js" ></script>
<script  src="/deng-2022/blog_2/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>







  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/deng-2022/blog_2/js/local-search.js" ></script>

  <script defer src="/deng-2022/blog_2/js/leancloud.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/deng-2022/blog_2/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
